[React] 리액트 컴포넌트의 이벤트 핸들러

함수 컴포넌트가 어떤 순서로 업데이트 되는지(재렌더링 되는지) 보면

import { useState } from 'react';

function MyButton() {
  const [count, setCount] = useState(0);
  
  function handleClick() {
    setCount(count + 1);
  }
  
  return (
  	<button onClick={handleClick}>
    	Clicked {count} times
    </button>
   );
}

 

1. count = 0 인 상태로 버튼이 보이고,
2. 버튼을 클릭했을 때 handleClick 함수를 호출하면, 
3. setCount함수에 count + 1을 넘겨주며 실행
4. 이때, 리액트는 업데이트 해야 하는 것을 알아차리고 다시 렌더링 한다.
5. setCount함수에 count + 1을 넘겨주며, 실행되는 과정에서 클로저(외부 스코프의 값을 기억)로 인해 외부 스코프에 있는 count 값인 0을 참조하고 거기에 1을 더한다.
6. 다시 return 코드로 넘어가서 Clicked 1(count값이 업데이트 되어 보여짐) times 버튼이 보이고, 
7. 한번 더 클릭하면 다시 handleClick가 호출되고, handleClick의 setCount(count+1)가 실행된다.