[REACT] useCallback, React.memo로 함수 재사용, 컴포넌트 리렌더링 방지를 통한 최적화 작업 하기 (수정 필요)

useCallback으로 이전에 만들었던 함수 재사용 하기

컴포넌트가 리렌더링 될때마다 새로운 함수를 계속 만들고 있는 문제
-> 함수를 새로 만드는 것은 메모리도 cpu도 많이 차지하지는 않기 때문에 그 자체만으로 부하가 걸리진 않는다.
그럼에도 한번 만든 함수를 재사용할 수 있다면 재사용 하는게 좋다.

사용법

const onChange = useCallback(
    e => {
      const { name, value } = e.target;
      setInputs({
        ...inputs,
        [name]: value
      });
    },
    [inputs]
  );

 

이렇게 useCallback으로 감싸준다
그러면 deps에 넣은 값이 바뀔때만 함수가 새로 만들어진다.
여기서는 inputs가 바뀔때만 함수가 새로 만들어진다.

 

 

이렇게만 해놓는다고 해서 최적화가 이루어지지는 않는다.

구글에서 react dev tools를 설치한다.

이 확장 프로그램을 사용하면 렌더링 되는 컴포넌트를 확인할 수 있다.

 

 

React.memo를 사용하여 불필요한 컴포넌트 리렌더링 방지

사용법

export default React.memo(CreateUser);

컴포넌트를 export할때 React.memo로 감싸주면

props가 바뀌었을때만 리렌더링 된다.

 

 

 

 

const User = React.memo(function User({ user, onRemove, onToggle }) {
  return (
    <div>
      <b
        style={{
          cursor: 'pointer',
          color: user.active ? 'green' : 'black'
        }}
        onClick={() => onToggle(user.id)}
      >
        {user.username}
      </b>
      &nbsp;
      <span>({user.email})</span>
      <button onClick={() => onRemove(user.id)}>삭제</button>
    </div>
  );
});

이렇게 함수자체를 React.memo로 감싸줄 수도 있다 .

 

 

 

 

 

참고: 벨로퍼트