챕터5 에서는 state 및 이벤트를 다뤄볼 것이다.

1. Handling Events
2. Updating UI & Working with “state”
3. closer look at components & state

우리는 챕터4에서 컴포넌트에 대한 내용을 배웠다. 이번 차례는 사용자가 값을 Input에 입력했을때 발생하는 이벤트를 다루는 방법에 대해서 배워볼 것이다.

우리는 버튼을 눌렀을때 제목이 변경되는 기능을 만들어 보고 싶다고 가정하자. 이벤트가 발생했을때 이를 브라우저가 감지하고, 우리는 발생한 이벤트 객체를 전달받을 수 있다.

...

const clickHandler = (e) => {
	console.log(e);//이벤트 객체 콘솔창에서 볼 수 있음.
}

...

<button onClick={clickHandler}>Click me!</button>

...

button property로 onClick 프로퍼티를 써준다음 클릭 이벤트 핸들러 함수를 할당하면 클릭 이벤트가 발생했을때 해당 clickHandler 함수가 실행이되면서 이벤트 객체가 콘솔창에서 출력이 된다.

다음으로 우리는 clickHandler 함수에 값이 변경되도록 변수를 하나 만들어주고 버튼을 눌렀을때 값이 “clicked” 라고 변경해 줄 것이다.

...
let message = "푸히히 아직 입력안됐지롱";

const clickHandler = (e) => {
	console.log(e);
	message = "clicked";
}

return 
<>
	<p>{message}</p>
	<button onClick={clickHandler}>Click me!</button>
</>
...