🔥 React: 리액트 최적화를 위한 useCallback, React.memo, useMemo()

리액트에서는 state 혹은 props이 변경될 경우 리렌더링이 발생한다.

부모의 state를 props으로 받는 컴포넌트A와, 단순히 onClick()함수를 props으로 받는 컴포넌트 B가 있다고 하자.

부모의 state가 바뀌면 부모 뿐만 아니라 자식 컴포넌트도 함께 리렌더링이 발생한다. 변하지 않은 onClick()함수를 props으로 전달 받는 컴포넌트 B도 리렌더링이 발생한다. 이는 onClick()함수의 참조 값이 달라져서 리렌더링이 발생한다.

📚 데이터 자료 구조

• 원시형: String, Number, Boolean, undefine, null, ...
  • 원시 자료형이 할당될 때에는 변수에 값(value) 자체가 담긴다.
• 참조형: Array, Object, Function
  • 참조 자료형이 할당될 때는 보관함의 주소(reference)가 담긴다.

useCallback

최적화를 통해 불필요한 리렌더링을 줄여보자.
useCallback()은 memoization 기능으로 기존에 수행한 연산 값을 저장해 두고 재사용 할 수 있게 해준다.

• useCallback()으로 함수를 감싸면, 의존성 배열(dependency)이 변하지 않는 이상 컴포넌트 리렌더링시 변수에 동일한 함수가 할당되어 불필요한 리렌더링이 줄어든다.

리액트가 리렌더링 될 때 두 단계를 거치는데, 첫 번째로 Render Phase(렌더 단계)를 거치고 두 번째로 Commit Phase(커밋 단계)를 거친다.

• Render Phase
  컴포넌트(함수)를 호출하면 리액트 엘리먼트를 반환하는 과정에서 virtual DOM을 만드는데, 이전 DOM과 비교하여 DOM을 재조성(Reconciliation)하는 단계이다.
• Commit Phase
  Redner Phase에서 변경이 필요한 부분이 확인 된 경우, 변경이 필요한 부분을 Real DOM에 반영하는 단계이다. 따라서 Render Phase에서 변경이 필요한 부분이 없다고 확인된 경우 커밋단계는 생략된다.

결론적으로, useCallback()을 사용한 결과 값을 유지할 수 있게 되어 컴포넌트B의 render phase는 실행되었지만, commit phase는 실행되지 않는 유의미한 효과를 가질 수 있다.

React.memo

그런데 여전히 render phase가 실행되기 때문에 불필요한 리렌더링이 계속 발생한다. 왜 그럴까?
리액트의 컴파일러를 열어보면 React.createElement로 여전히 컴포넌트B를 만들고 있기 때문이다.

render phase 도 막기 위해서는 React.memo를 사용하면 된다.
React.memo를 사용하면 전달받은 props를 이전 props와 비교하여 같으면 리렌더링을 막아주고, 렌더링 결과를 재사용할 수 있다.

• 이 때, 리액트 메모 기능은 기본적으로 props을 얕은 비교를 사용하여 비교한다.

  얕은 비교

  • 원시타입: 값이 다른지 비교
  • 참조타입: 참조 값이 같은지 비교

function 컴포넌트B({온클릭함수}){
  return <div>
    {온클릭함수}
    </div>
}
export default React.memo(컴포넌트B);

• 이렇게 컴포넌트B를 리액트메모로 감싸주면 props이 변하지 않는 한, 리렌더링을 막아 render phase자체도 막을 수 있다.

useMemo()

props로 함수말고 객체를 넘겨주면 어떻게 될까?
컴포넌트B를 리액트 메모로 감싼 채, props에 온클릭함수 대신 변하지 않는 item이라는 객체를 보내보자.

//App.js
const item = {
  name: "outer",
  number: 100,
}
//...
return (
  <컴포넌트B item={item} />
)

//컴포넌트B.js
function 컴포넌트B({item}){
  return(
    //...
  )
}

export default React.memo(컴포넌트B);

이 경우, React.memo()를 사용하고 있음에도 컴포넌트B가 리렌더링 된다.
컴포넌트 입장에서는 부모로 부터 매번 다른 item을 전달받기 때문이다.

item 이라는 객체가 매번 새로 생성됨 👉 컴포넌트에게 매번 다른 참조값을 가진 item을 props으로 전달 👉 React.memo() 작동하지 않음

이럴 때는 useMemo() 훅을 사용하면 된다.

• useCallback()
  함수에 대한 memoization 제공
• useMemo()
  값에 대한 memoization 제공
  의존성 배열이 변경되지 않는 이상, 리레런더링시 같은 값 반환하여 불필요한 리렌더링 없앰

const memoizedItem = useMemo(() => item, []);

useMemo()훅을 사용해 memoized된 item을 만들어 컴포넌트B에 props으로 보내면 item과 동일한 객체가 전달되므로 리액트메모가 정상적으로 작동하여 불필요한 리렌더링이 발생하지 않는다.

결론

무작정 사용하기 보다 먼저 근본적인 코드 개선이 가능한지 고민해 볼것!

미리 최적화 하려고 하지 말고, 필요할 때 사용할 것!

참고