[TIL] sparta 26일차 - memo, useContext, useCallback

React.memo 

• React.memo는 함수 컴포넌트의 성능 최적화를 위한 React 훅
• 컴포넌트가 같은 props로 다시 렌더링 될 때, 이전 렌더링 결과를 재사용하여 성능을 향상시킨다

React.memo(Component) 
// 형태로 컴포넌트를 감싸면 해당 컴포넌트는 props가 변경되지 않는 한 다시 렌더링되지 않는다

 

---

React.useContext 

• prop drilling의 문제점 때문에 등장한 react context API
• React.useContext는 함수 컴포넌트에서 Context API를 통해 전역 상태를 사용할 수 있도록 해주는 React 훅
• 쉽게 전역 데이터를 관리할 수 있다
• Context는 컴포넌트 트리 안에서 데이터를 공유하는 데 사용된다

const value = useContext(MyContext) // 형태로 Context 객체를 이용하여 값을 가져올 수 있다

 

주의할 점

렌더링 문제

• useContext를 사용할 때, Provider에서 제공한 value가 달라진다면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링 돼서 value 부분을 항상 신경써줘야 한다

 

---

React.useCallback 

• React.useCallback은 함수를 메모이제이션하는 React 훅으로, 불필요한 함수 재생성을 방지하고 성능을 향상시킨다
• 보통 이벤트 핸들러나 props로 전달되는 함수를 최적화하는 데 사용된다

const memoizedCallback = useCallback(callback, [dependencies]) // 형태로 콜백 함수와 의존성 배열을 지정하여 메모이제이션된 콜백 함수를 얻을 수 있다