리액트 렌더링 최적화 예제 코드

렌더링 최적화에 대해 공부할 수 있는 예제 코드를 작성해봤습니다.
각 예제 코드에 대한 자세한 설명은 블로그 글을 통해 확인할 수 있습니다.
https://leetrue-log.vercel.app/react-rendering

---

✏️ 주요 내용

1. 컴포넌트 구조에 따른 불필요한 렌더링 요소 없애기

컴포넌트의 상하위 구조를 고려한 구조 설계로 리렌더링이 필요하지 않은 컴포넌트에서의 불필요한 렌더링을 줄이는 방법에 대해 생각해봅시다.

2. 객체 타입의 데이터를 props로 내려줄 때 유의할 것

객체가 props로 내려갈 때 React.memo()를 감싸더라도 하위 컴포넌트의 리렌더링을 피할 수 없는 이유에 대해 알아봅시다.

3. 컴포넌트 매핑 시 key값에 index를 넣으면 안되는 이유?

배열을 매핑하여 컴포넌트를 반환할 때의 key값을 index로 설정하면 React.memo()로 랩핑을 하더라도 리렌더링이 발생할 수 있는 이유에 대해 알아봅시다.

4. React.memo()

상위 컴포넌트가 리렌더링이 될 때 하위 컴포넌트의 리렌더링이 필요없는 경우에 어떻게 리렌더링을 방지할 수 있는지 알아봅시다.

5. useMemo()

값을 캐싱하는 것이 렌더링 최적화에 있어서 어떻게 활용할 수 있는지 알아봅시다.

6. useCallback()

함수를 캐싱하는 것이 렌더링 최적화에 있어서 어떻게 활용할 수 있는지 알아봅시다.