React 최적화의 기본

1. 컴포넌트를 분리한다. React - 컴포넌트 분리, Redux - 개념
2. memo를 사용한다.
3. memo로도 최적화 하기 힘들다면 다음과 같이 해본다.

props, state 변화 로깅

React를 최적화할 때 props와 state가 어떻게 변화되는 지 분간하기 힘든 순간이 있다.
그럴 때는 다음과 같이 useRef를 사용하여 로깅을 해주면 리렌더링 전후에 props나 state가 어떻게 변화하는 지 알 수 있다.

useEffect의 두 번째 파라미터의 deps에 들어 간 값이 변할 때 마다 useEffect가 호출 되는 것을 이용하는 것이다.

import React, { useEffect, useRef } from 'react';

const PostForm = ({ post }) => {
  
  const postMemory = useRef(post);
  
  console.log('post', post); // 기존 post
  
  useEffect(() => {             // 바뀐 post
    console.log('post useEffect', postMemory.current, post, postMemory.current === post);
  }, [post]);
  
  return (
    ...
    )
}

export defalut PostForm

객체 props, state 최적화

추가적으로, 어떤 props나 state가 객체라면, 객체의 attribute 하나가 변하여서 리렌더링이 될 수 있다. 이 경우에는 해당 attribute가 필요한 컴포넌트에서 attribute만을 따로 분리하여서 사용하면 된다.

const { me } = useSelector(state => state.user)

// me.id 만을 추출
const id = useSelector(state => state.user.me && state.user.me.id)

useSelector에서 가져오고 싶은 attribute만을 가져올 수 있게 함수를 작성할 수 있다.