[React] 3-3. State 복습

State 복습!

modifier 함수를 사용해 컴포넌트의 state(app의 데이터)를 바꿀 때 컴포넌트는 재생성되어 새로운 값을 가지고 리렌더링된다.

다음 코드를 통해 확인해 보자.

. . . . .
function App() {
  const [counter, setCounter] = React.useState(0);
  const onClick = () => {
    setCounter(counter + 1);
  };
  console.log("rendered");     // 주목!
  console.log(counter);     // 주목!
. . . . .

- "rendered"는 처음 브라우저가 로드될 때와 버튼 클릭 시 console 창에 나타난다.

- counter는 페이지가 처음 로드되었을 때는 0으로 console 창에 나타나지만 버튼 클릭 시 1씩 증가하므로 1이 증가된 값이 console 창에 나타난다.

위의 console.log 두 줄의 코드가 실행되는 것을 보아 데이터가 바뀔때마다 React.js는 컴포넌트를 리렌더링하고 UI를 refresh 시킨다는 것을 알 수 있다.