C-log

⚛️React Training - section04 : Memo 본문

⚛️React/⚡ver.2

⚛️React Training - section04 : Memo

4:Bee 2024. 2. 3. 16:50
728x90

이번 포스팅에서는 재활용 했던 컴포넌트의 render를 고려해서 코드를 작성해 볼 것이다. 지난 포스팅에서 몇 번이나 말 했듯이 React는 렌더링으로 초기 로딩 속도가 지연되기에 컴포넌트를 잘 분리해야한다 했다. 이를 개선하기 위해서는 memo라는 Hook을 사용하는데 이를 사용하지 않았을 때의 코드와 결과를 살펴보면 아래와 같다.

<!DOCTYPE html>
  ...
  function Btn({ text, onClick }) {
    console.log(text, "was Rendered")
    return (
      <div>
        <button
          onClick={onClick}
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
          }}
        >
          {text}
        </button>
      </div>
    );
  }
  function App() {
    const [value, setValue] = React.useState("Save Changes");
    const changeValue = () => setValue("Revert Changes");
    return (
      <div>
        <Btn text="Save Change" onClick={changeValue} />
        <Btn text="Continue" />
      </div>
    )
  }

  const root = document.getElementById("root");
  ReactDOM.render(<App />, root);
</script>

</html>
 
//초기 렌러딩
Inline Babel script:4 Save Change was Rendered
Inline Babel script:4 Continue was Rendered
 
//클릭 했을 때
Inline Babel script:4 Save Change was Rendered
Inline Babel script:4 Continue was Rendered
 

지난 포스팅에 보여 주었던 코드와는 별 다를 바가 없지만 결과를 보면 초기 render 했을 때와 클릭이 가능한 버튼을 눌렀을 때의 결과를 보면 모든 컴포넌트들을 render 하고 있다는 것을 알 수가 있다. 즉, re-render 과정이 많으면 많을 수록 브라우저의 속도는 지연이 되는 것이다. 이를 해결하기 위해서 앞서 말했던 memo를 사용하면 아래와 같다.

<!DOCTYPE html>
  ...
  function Btn({ text, onClick }) {
    console.log(text, "was Rendered")
    return (
      <div>
        <button
          onClick={onClick}
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
          }}
        >
          {text}
        </button>
      </div>
    );
  }
  const MemorizedBtn = React.memo(Btn);
  function App() {
    const [value, setValue] = React.useState("Save Changes");
    const changeValue = () => setValue("Revert Changes");
    return (
      <div>
        <MemorizedBtn text="Save Change" onClick={changeValue} />
        <MemorizedBtn text="Continue" />
      </div>
    )
  }

  const root = document.getElementById("root");
  ReactDOM.render(<App />, root);
</script>

</html>
 
//초기 렌더링
Inline Babel script:4 Save Change was Rendered
Inline Babel script:4 Continue was Rendered
 
//클릭 했을 때
Inline Babel script:4 Save Change was Rendered
 

이렇게 memo를 사용하면 state가 변동이 되는 부분만 re-render 되고 있다는 것을 알 수 있다. 다시 정리하자면 컴포넌트를 여러개 만들어야할 때 주의 해야 한다. 하나의 컴포넌트를 여러개로 사용할 시에 여러 버튼 중 하나의 state가 변경되 었을 때 모든 컴포넌트가 re-render가 되어야 하기 때문이다. 그럴 때 memo라는 Hook을 이용해야한다. 따라서 컴포넌트를 함부로 나누어선 안되고 어떻게 왜 나눠야 하는지 잘 생각하며 나눠야 한다.

728x90
저작자표시

'⚛️React > ⚡ver.2' 카테고리의 다른 글

⚛️React Training - section05 : useEffect  (0) 2024.02.04
⚛️React Training - section04 : propsTypes  (0) 2024.02.03
⚛️React Training - section04 : Props와 Components  (0) 2024.02.03
⚛️React Training : Controlled Component&Uncontrolled Component  (0) 2024.02.02
⚛️React Training : useState의 간단한 원리  (1) 2024.01.26
'⚛️React/⚡ver.2' Related Articles more
Comments