📸 2022-08-02

🔥 오늘 어디에 도전해보셨고, 무엇을 배우셨나요?

• 프로그래머스 신고 결과 받기 - Javascript
• React의 memo와 useCallback

🌊 학습하시면서 궁금하신 부분이나, 어려웠던 점은 뭘까요?

• useCallback의 의존성 더 공부해보기.. 함수를 변경할 경우는 언제이고 의존성 배열에 뭘 추가해야 하는거지..?
• 오랜만에 코딩테스트해서 그런가, 저 문제만 3번을 풀었는데 풀 때마다 시간이 오래 걸리고 불필요한 반복문을 쓰게 된다. 노력하자..😢

🌟 내일은 어떻게 해보고 싶으세요?

• 코딩 테스트 문제 1개 이상 풀기
• React의 useCallback 더 공부하고 써보기

---

React.memo와 useCallback

• 컴포넌트의 props, state, context가 변경되면 그 컴포넌트 함수를 재실행하며 화면에 나타날 것을 확인한다.
• 부모 컴포넌트가 위와 같은 이유로 재실행된다면 자식 컴포넌트도 재실행된다. 자식 컴포넌트의 props 값이 변하지 않더라도 재실행된다.
• 컴포넌트가 재실행된다고 해서 실제 DOM이 업데이트 되는 것은 아니다. 리액트 DOM은 갱신 전후의 상태 차이를 인식하고 실제 DOM에 변화된 부분만 조작한다.

• React.memo는 인자로 들어간 컴포넌트에 어떤 props가 입력되는지 확인하고 입력되는 모든 props의 신규 값을 확인한 뒤 기존 props와 비교한다. 그리고 props가 바뀐 경우에만 컴포넌트를 재실행 및 재평가한다.

  • props가 변하지 않는 경우 불필요한 렌더링을 방지해주므로 최적화에 도움이 된다. 그런데 왜 전체적으로 사용하지 않을까? memo를 사용하는 것에도 비용이 발생한다. 기존 값과 신규 값을 비교해야 하므로 기존 값을 저장할 공간과 비교 작업을 수행하기 때문이다. 따라서 앱의 크기나 기능에 따라 사용 여부를 적절하게 고려해야 한다.

  • memo로 감싼 컴포넌트에 참조 타입을 props로 전달하면 그 값이 동일하더라도 재실행된다. 아래 코드에서 Button은 onClick이라는 props로 함수를 전달 받는다. onClickHandler는 App 내부에서 선언되었기 때문에 App이 다시 렌더링될 때마다 새롭게 생성되어 매번 기존 props와 다른 값으로 인식된다. {} === {}는 false와 같다.

    const Button = React.memo((props) => {
      return <button onClick={props.onClick}>{props.children}</button>;
    });
    
    const App = () => {
      const onClickHandler = () => {
        /* ... */
      };
      return <Button onClick={onClickHandler}>Click!</Button>;
    };
    

    • 참조 타입의 데이터를 props로 전달하면서 재실행을 방지하려면 useCallback을 사용해야 한다. 특정 객체를 useCallback으로 감싸면 그 객체는 컴포넌트가 재실행될 때 재사용하게 된다. 객체가 변경되어야 할 시점은 의존성을 추가해서 알려줄 수 있다.

      const onClickHandler = useCallback(() => {
        /* ... */
      }, []);