[React] useState와 이벤트 처리

1. 이벤트 처리의 차이

---

React와 vanillaJS의 이벤트 처리 방식은 유사하다.

다만 문법에서 몇 가지 차이가 나는데,

✔️ React의 이벤트는 camelCase로 작성할 것
✔️ 문자열이 아닌 중괄호로 이벤트 핸들러에 전달할 것

 

예시를 들어보자.

일반 HTML은 다음과 같다.

<button onclick="count()">
	Add Count
</button>

 

반면 React는 중괄호를 이용한다.

<button onclick={count}>
	Add Count
</button>

 

 

이 정보를 바탕으로 버튼을 클릭하면 숫자가 증가하는 동적 이벤트 처리를 만들어보자.

간단한 이벤트 처리므로 화살표 함수를 활용했다.

<button onClick={() => { count++; }}> Count </button>

 

2. useState

---

리액트는 변경될 state를 미리 알려주기 위해 useState를 사용해야한다.

컴포넌트가 동적인 반응을 할 경우에는 useState를 사용해 상태를 관리해야한다.

 

참고로 useState는 리액트 16.8에서 도입된 리액트 Hook 중 하나다.

useState를 호출할 때는 초기값을 입력해주면 된다.

useState(0);

 

3. 활용법

---

num은 const로 선언해주었으니, 숫자는 setCount을 통해 수정해주어야한다.

export default function Test(){
	const [count, setCount] = useState(0);

	return (
    	<>
        	<button onClick={() => setCount(count+1);}> 
            	Click me! 
            </button>
        </>
    );
}

function AppTest() {
	return(
    	<Test />
    );
}
export default AppTest();

 

 

cf.

Handling Events – React

Using the State Hook – React