[23.08.13] 리액트 - 최적화를 위한 메모이제이션 React.memo, useCallback, useMemo

• 컴포넌트 성능을 최적화(Optimization) 한다?

리액트에서 렌더링은 = 비용으로 최대한 줄여야 한다. 불필요한 리렌더링을 막는 작업을 최적화(Optimization)한다고 한다. 리액트에서 불필요한 렌더링이 발생하지 않도록 최적화하는 대표적인 방법은 세가지가 있다.

• memo(React.memo) : 컴포넌트를 캐싱
• useCallback : 함수를 캐싱
• useMemo : 값을 캐싱

---

• Memo (React.memo)

예시코드
Box1,2,3은 카운트와 상관없는 자식 컴포넌트,
현재는 카운트가 바뀔 때 마다 같이 리렌더링 된다.

Memo (React.memo) 적용하기
: 렌더링을 막을 자식 컴포넌트 export 시 React.memo( )로 감싸준다
→ 처음 렌더링 이후 카운트가 올라갈 때 Box1,2,3 컴포넌트는 리렌더링 되지 않는다.

---

• useCallback

함수는 저장될 때 메모리에 직접적으로 저장되지 않고 별도의 공간에 저장되고, 그 공간의 주소값을 가지고 있게 된다.

함수형 컴포넌트도 리렌더링될 때 그 함수를 저장하는 주소값이 바뀌게 되는데, 만약 자식컴포넌트에게 함수를 프롭스로 내려줬다고 하면 부모컴포넌트가 리렌더링이 되면서 함수의 주소값이 바뀌게 되고, 자식컴포넌트는 (주소가 바뀐)프롭스가 바뀐것으로 인식하게 되면서 리렌더링을 한다.

useCallback이라는 함수를 통해서 함수 자체를 메모이제이션 하는게 필요함. 프롭스로 내리고자하는 함수를 별도 메모리공간에 저장을 해서 특정조건이 아닌 경우에 변경되지 않게 해놓는 작업.

→ App.jsx가 리렌더링될 때마다 Box1.jsx도 리렌더링 됨.
(React.memo를 통해서 Box1.jsx는 메모이제이션을 했는데도 리렌더링이 됨.)

useCallback 적용하기

: useCallback( ) 함수로 감싸고 + 의존성배열 넣기.
const 함수 = useCallback(()=>{함수로직},[의존성배열]);

---

• useMemo

동일한 값을 반환하는 함수를 계속 호출해야 하면 필요없는 렌더링을 한다고 볼 수 있다. useMemo로 맨 처음 해당값을 반환할 때 그 값을 메모리에 저장한 후 필요할 때 이미 저장된 값을 꺼내 쓸 수 있다. 이런 기법을 캐싱을 한다.고 표현하기도 한다.

useMemo(()=>{},[ ]) 의존성 배열 안에있는 값이 업데이트 될 때에만 콜백 함수를 다시 호출하여 메모리에 저장된 값을 업데이트 해준다.

의존성 배열을 빈배열[ ] 넣는다면 useEffect와 동일하게 마운트 될 때에만 값을 계산하고 그 이후론 계속 memoization된 값을 꺼내와 사용한다.

useMemo 적용하기
: const 함수 = useMemo(()=>{함수로직},[의존성배열]);