[React] 리렌더링

학습일 : 2023. 03. 07

---

<script type="text/babel">
    const root = document.getElementById("root");

    function App() {
      const [counter, setCounter] = React.useState(0); 

      const onClick = () => {
        setCounter(counter + 1); 
      };

      console.log("rendered");
      console.log(counter);

      return (
        <div>
          <h3>Total Clicks : {counter}</h3>
          <button onClick={onClick}>Click Me!!</button>
        </div>
      );
    }

    ReactDOM.render(<App />, root);
  </script>

 

 

modifier 함수를 사용하여 state 즉, 어플리케이션의 데이터를 바꿀 때
새로운 값을 가지고 컴포넌트 전체가 재생성된다.

이는 새로운 값을 가지고 리렌더링 된다는 의미이다.

 

좀 더 쉽게 예를 들자면,
counter가 원래 0이었는데 => 클릭을 하여 1로 세팅이 되면
리렌더링이 일어난다고 볼 수 있으며

 

개발자 도구를 확인해보면

리액트는 정말 똑똑한 아이라서

바뀌는 부분만 refresh 해준다는 것을 알 수 있다.

코드가 복잡해지고 길어진다는 것을 염두해 둔다면,

여러모로 효율성이 뛰어날 것이라 생각된다.

 

물론 아직까지는 체감이 잘 되진 않지만;;