JHeaon 개발일지

오늘은 리액트 State에 대해서 알아보자. 일단 아래코드를 살펴보자 아래 코드는 클릭 이벤트가 발생했을 때 title이 바뀌는 코드이다. 🖥️ ExpensItem.js import "./ExpenseItem.css"; function ExpensItem(props) { let title = props.title; const handleClick = () => { title = "안녕하세요!"; } return ( {props.date.toISOString()} {title} ${props.amount} hello ); } export default ExpensItem; 하지만 버튼을 눌렀을 경우 버튼 이벤트인 handleClick이 작동하지 않았음을 알 수 있다. 왜 작동하지 않는 걸까? 이는 리액트의..

오늘은 리액트에서 이벤트 핸들러를 수행하는 방법에 대해 알아보자 이벤트 핸들러 React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트 처리하는 방식과 매우 유사하지만 몇 가지의 문법 차이가 존재한다. 문법의 차이는 다음과 같다. React의 이벤트는 소문자 대신 캐멀 케이스를 사용한다. 예) onclick (X), onClick (O) 일반적으로 props에서 이벤트를 찾을 때는 on접두사를 붙인 뒤 이벤트를 찾고, 함수의 이름은 handleClick처럼 handle 접두사를 지정하여 처리하는 것이 일반적이다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다. 아래부터는 여러 이벤트 헨들러를 다루는 예를 소개해볼 예정이다. 버튼 이벤트 핸들링 아래는 button에 새로..

리액트란 사용자 인터페이스를 구축하는 자바 스크립트 라이브러리이다. 물론 Html, Css, Javascript로 사용자 인터페이스를 구축할 수 있지만, 복잡한 인터페이스를 구축하기에는 조금 불편한 점이 있을 수 있다. 따라서 리액트의 힘을 빌려 좀 더 쉽게 인터페이스를 구축하기 위해 사용한다. 리액트 리액트는 사용자 인터페이스를 구축하는 자바 스크립트 라이브러리 종류 중 하나이며 모두 컴포넌트(html, css, js의 결합물)로 구성되어 있다. 리액트를 사용하게 된다면 다음과 같은 이 점을 얻을 수 있다. 재사용성 증대 관리 용이성 증대 리액트 프로젝트 생성하고 실행하기 리액트 프로젝트를 생성하기 위해서는 node.js을 설치하여야 한다. 참고 : https://nodejs.org/ko Node.js..