<aside> 🚩 Goal: React.memo, useCallback, useMemo를 알아보고 직접 사용해봅니다.

</aside>

1. memo()

<aside> 📌 비어있는 새로운 프로젝트를 생성해서, API를 각각 테스트 해봅시다.

</aside>

• (1) memo()란?
• (2) 컴포넌트의 리렌더링 확인하는 법
• (3) 불필요한 리렌더링을 막는 방법

2. useCallback

• (1) Button.js 가 다시 리렌더링을 하게 된 이유
• (2) Button.js의 리렌더링을 막으려면?
• (3) useCallback 이란?
• (4) useCallback 사용해보기

2. useMemo

• (1) useMemo란?
• (2) useMemo 사용해보기

3. 주의사항

• memo(), useCallback, useMemo 의 무분별한 사용은 오히려 퍼포먼스 성능에 악영향이 될 수 있습니다. 반드시 리렌더링이 필요한 컴포넌트나 또는 값 (함수, 배열, 객체)에는 memo(), useCallback, useMemo 를 사용하는 것이 오히려 좋지 않습니다. 왜냐하면 memo(), useCallback, useMemo 를 사용하는 것은 리액트에게 “렌더링 이후의 값과 전의 값을 비교해서 같으면 재생성하지마!” 라고 주문을 하는거에요. 근데 반드시 바뀌어야하는 값에 저 기능을 사용하면 굳이 비교하지 않아도 될 것들에도 리액트가 비교를 하기 때문입니다.

그렇기 때문에 저 기능을 사용하기에 앞서, 불필요한 리렌더링이 맞는지, 개선할 수 있는 부분인지 확인하고 사용하도록 하세요.

4. 정리

• memo() 를 사용하면 컴포넌트의 불필요한 리렌더링을 막을 수 있다.
  • 다만, 컴포넌트의 props가 있는 경우 useCallback과 useMemo를 적절하게 사용하여 리렌더링의 원인이 되는 것을 모두 제거해줘야 정상적으로 작동한다.
• useCallback의 대상은 함수, useMemo의 대상은 객체나 배열과 같은 값이다.
  • 원시타입 데이터는 useMemo를 사용하지 않아도 리렌더링하지 않습니다. → useMemo 안써도 됩니다.