TIL27 | React 렌더링 최적화

React의 렌더링 실행 시점

• props 변경 시점
• state 변경 시점
• forceUpdate() 실행 시점
• 부모 컴포넌트 렌더링 시점

렌더링 결과에 영향을 미치지 않는 변경사항이 발생했을 때도 렌더링 된다면 불필요한 렌더링이 발생한 것으로 볼 수 있다.

shallow copy

React는 state가 변경되거나 새로운 컴포넌트가 렌더링 되는 시점에 shallow copy를 통해 같은 값인지 판단한다. 즉 객체(함수 포함)는 같은 참조가 아니라면 새로운 값으로 판단된다.

memoization

이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하고 성능을 향상시키는 기법

React 리렌더링 제어 방법

함수형 컴포넌트의 불필요한 리렌더링을 제어하는 방법에는 아래와 같은 것이 있다.

useMemo()

• 함수의 결과값을 memoization한다
• 특정 value를 재사용하기 위해 사용한다

/// users 이외의 state가 변경되더라도 count 값을 다시 계산하게 된다. 
const count = countUsers(users);

return (<>
        <UserList users={users} email={email} onToggle={onToggle} />
  <div>{count}</div></>);

/// useMemo 사용
const count = useMemeo(() => countUsers(users), [users]);

useCallback()

• 함수를 memoization한다
• 특정 함수를 재사용하기 위해 사용한다
• useMemo와 유사하게, 재사용하려는 함수를 첫번째 인자, 함수 내에서 사용되는 변수를 두번째 인자로 한다)
• 자식 컴포넌트에 함수를 props로 줄 때는 useCallback을 이용하여 불필요한 리렌더링을 막을 수 있다

React.memo()

• 컴포넌트를 memoization한다
• 컴포넌트를 memo로 감싸면 참조 동일성에 의존적인 pureComponent로 만들어 준다
• 같은 props로 렌더링이 자주 일어나는 컴포넌트, 렌더링에 리소스 소모가 큰 컴포넌트에 사용한다
• customizing한 비교를 원할 경우 두번째 인자로 전달한다. (false일 때 리렌더링 한다)