React / useMemo, useCallback, React.memo

useMemo

성능 최적화를 위해 연산된 값을 useMemo라는 Hook을 사용하여 재사용하는 방법이 있다.

밑에 리액트 컴포넌트 안에 2개의 로직이 있다고 가정하면,

 const count1 = countActiveUsers(users);
 const count2 = useMemo(() => countActiveUsers(users), [users]);

count1은 컴포넌트가 랜더링될 때마다 호출되고,

count2는 컴포넌트가 랜더링될 때마다 호출되는 것이 아닌, users가 바뀔 때만 호출된다.

실무 사용법

const MyComponent = ({input}) => { 

  return( 
      React.useMemo(() => {
        <Component>
          <div>input*2</div>
        </Component>
      }, [input])
  )}

 

useCallback

useMemo 는 특정 결과값을 재사용 할 때 사용하는 반면, useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용한다.

useCallback 소개만 하고 ㅡ 위의 count 예제처럼 useMemo안에 함수를 정의하고 deps를 주는 편이 낫다.

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

 

React.memo

React.memo는 prop 정보가 바뀌지 않으면 재랜더링을 방지한다.

 

사용법은 간단한데,

export default React.memo(CreateUser);

이런 식으로 React.memo안에 props가 바뀌지 않을 때 재랜더링을 막을 컴포넌트를 넣어준다,