React.useState() 렌더링

 

useState는 컴포넌트에서 변경되는 값을 관리하기 위해 사용된다.

 

React.useState()는 [state, modifier]를 반환한다.

 

이해를 위한 예시는 다음과 같다.

const [값, 값 세팅 함수] = React.useState(초기값);

 

 

카운터를 만드는 예시.

import React, { useEffect } from "react";

function App() {
  const [counter, setCounter] = React.useState(0);
  const handleClick = () => {
    setCounter(counter + 1);
  };
  return (
    <div className="App">
      <h1>{counter}</h1>
      <button onClick={handleClick}>CLICK</button>
    </div>
  );
}

export default App;

상수인const로 선언을 했는데도 counter를 setCounter로 조작할 수 있는 이유는!!

 

React는 state가 변하면 그 부모를 다시 re-rendering 하는 특성이 있기 때문이다.

 

App()함수에 console.log("렌더링 됨!")을 추가해 검증해보자.

 

1. 처음 js파일을 불러올 때 기본적으로 렌더링 된다.

2. 클릭 10번 갈기기

 

 react js는 상수를 가지고 노는데 너무 최적화 되있는것 같다.

 

state, modifer 사용시 리엑트가 자동으로 필요한 부분만 새로고침 해주는게 핵심이다.