useState에 대한 고찰

useState는 클래스 컴포넌트의 this.state가 제공하는 기능과 똑같습니다. 일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 사라지지 않습니다.

function Example() {
  // 새로운 state 변수를 선언하고, 이것을 count라 부르겠습니다.
  const [count, setCount] = useState(0);

 

 

 React는 해당 변수를 리렌더링할 때 기억하고, 가장 최근에 갱신된 값을 제공합니다. count 변수의 값을 갱신하려면 setCount를 호출하면 됩니다.

 

용자가 버튼 클릭을 하면 setCount 함수를 호출하여 state 변수를 갱신합니다. React는 새로운 count 변수를 Example 컴포넌트에 넘기며 해당 컴포넌트를 리렌더링합니다.

 

리랜더링 정리

• 리렌더링이라는 것은 렌더링이 다시 발생하는 것이다. 렌더링이라는 것은 화면상에 뷰(내용)를 보여주는 것이다.
• 리액트에서 리렌더링은 상태가 변화할 때 발생하는데 Virtual DOM에서 변경된 혹은 업데이트된 내용을 이전 값과 비교하여 변경된 값에 대해 렌더링을 해주는 (DOM 트리를 업데이트해주는) 것을 의미한다.