React / 최적화 함수

 

상태가 변화되면 리렌더링이 되는 것은 React의 기본 특징이기 때문에 리렌더링이 필요없는 컴포넌트들도 함께 리렌더링이 되곤 한다. 

또, 페이지 첫 로딩 시 csr방식 때문에 비교적 오래 걸리는데, 이러한 이유 때문에 프로젝트의 규모가 커질 수록 최적화가 필요해진다.

 

기존 컴포넌트의 방식은 아래와 같다. 자세한 내용은 생명 주기 글 참고

 

 

클래스 컴포넌트

• 컴포넌트를 클래스로 정의 -> 컴포넌트의 인스턴스가 화면에 표시됨
• 상태 변경 시 -> 인스턴스의 내부 값이 변경 -> 바뀐 값에 맞춰 화면이 리렌더링

=> 한번 만들어진 인스턴스는 제거되기 전까지 계속해서 재사용됨

 

 

함수형 컴포넌트

• 컴포넌트를 함수로 정의 -> 함수 호출
• 상태 변경 -> 기존에 호출된 함수 제거 -> 새로운 상태 값으로 함수 호출 -> 화면에 렌더링

=> 상태를 변경할 때마다 함수를 새로 호출하므로 매번 함수 내부 변수, 함수들도 전부 새로 선언 및 할당됨

=> 재사용할 수 있는 것도 새로 만들어 사용됨 => 비효율 발생

 

---

 

최적화 함수

재사용할 수 있는 것은 저장했다가 재사용할 수 있게 만들어졌다.

React에서 제공하는 최적화 함수 중 대표적으로는 useMemo(), useCallback(), memo() 등이 있다.

 

 

 

---

 

 

useMemo()

함수 호출 결과 (계산 결과)를 저장하는 훅이다. 사용 방법이 useEffect와 유사한 것이 특징...

const 저장할_호출 결과 = useMemo(()=>{
	return 함수 코드
},[값]) // 컴포넌트 호출시 [값]이 변하지 않았다면 함수를 다시 호출하지 않는다

 

useEffect와의 차이

	useMemo	useEffect
역할	함수 호출 값을 기억 + 의존성 배열이 변경됐을 경우에만 다시 계산	호출 과정에서 렌더링에 영향을 끼칠 수 있는 것을 모아 따로 처리하기 위한 기능 ((api 호출, 타이머, 이벤트 등록 등)
실행 시점	렌더링 중에 실행 (동기적)	렌더링 후에 실행 (비동기적)
렌더링 영향	값을 반환 후 렌더링에 직접 사용	effect만 발생하며 렌더링에 직접적인 관여X

 

 

예시 1 

숫자의 상태를 변경하기 위해 counter 상태와 그냥 렌더링을 위한 render 상태를 생성했다.

function App() {
  const [count, setCount] = useState(0);
  const [rerender, setRerender] = useState(false);

  const plus1 = (count) => {
    console.log('plus1 실행');
    return count + 1;
  };
  const countPlus1 = plus1(count);

  return (
    <>
      <div>countPlus1 : {countPlus1}</div>
      <button onClick={() => {
          setCount(count + 1);
        }}>
        count + 1
      </button>
      <button onClick={() => {
          setRerender(!rerender);
        }}>
        Rerender
      </button>
    </>
  );
}

 

 

 

number가 변화할 때 뿐만이 아닌 rerender의 상태가 false, true로만 바뀌고 있는데

이와 관련없는 plus1이 계속해서 호출이 되고 있음을 알 수 있다.

 

 

예시 1-1 : useMemo 사용

constPlus1을 다음과 같이 useMemo()를 사용해 의존성 배열에 값으로 count를 넣어줬다.

  const countPlus1 = useMemo(() => {
    return plus1(count);
  }, [count]);

 

 

 

count의 값이 변하지 않는 이상 plus1이 호출되지 않음을 확인할 수 있다.

 

 

 

---

 

 

 

useCallback()

함수 자체를 저장 

const 저장할_함수 = useCallback(()=>{
	return 함수 코드
},[값]) // 컴포넌트 호출시 [값]이 변하지 않았다면 함수를 다시 만들지 않는다

 

 

예시 2

위의 예시 1-1에서 썼던 코드에 useEffect를 추가해서 plus1 함수가 언제 재생성되는지를 확인해봤다.

  useEffect(() => {
    console.log('plus1 재생성');
  }, [plus1]);

 

 

rerender 상태의 변경 시에도 리렌더링될 때마다 계속 실행되고 있음을 확인할 수 있다.

 

 

예시 2-1 : 의존성 배열 []

  const plus1 = useCallback(
    (count) => {
      console.log('plus1 실행');
      return count + 1;
    }, [],
  );

 

plus1의 생성은 처음 렌더링됄 때 한번만 이루어지며,

이후는 상태를 아무리 바뀌어도 plus1만 실행되고 있음을 확인할 수 있다.

 

 

예시 2-2 : 의존성 배열 [count]

  const plus1 = useCallback(
    (count) => {
      console.log('plus1 실행');
      return count + 1;
    }, [count],
  );

 

count가 바뀔때만 함수를 생성하고 있다..

(지금은 useMemo에서 rerender 값이 바뀔때만 리렌더링되도록 작성한 상태라, rerender 버튼을 눌러야 바뀐 값이 리렌더된다.)

 

 

예시 2-3 : 의존성 배열 [rerender]

  const plus1 = useCallback(
    (count) => {
      console.log('plus1 실행');
      return count + 1;
    }, [rerender],
  );

 

count가 변경될 때는 아무일도 일어나지 않지만 rerender가 변경될때마다 실행됨을 확인할 수 있다.

 

 

 

---

 

 

 

memo()

컴포넌트를 저장하며, props가 변경될 때마다 사용

const 저장할_컴포넌트 = memo((props)=>{
	함수 컴포넌트 코드
}) // 컴포넌트 호출 시 전달받은 props 값이 변하지 않았다면 함수를 호출하지 않는다

 

 

 

예시

위의 2-3코드에서 count값을 표시해주는 컴포넌트 countDisplay를 생성했다.

function App() {
// 생략.... 
  return (
    <>
      <CountDisplay count={count} />
      <div>countPlus1 : {countPlus1}</div>
      <button onClick={() => {
          setCount(count + 1);
        }}>count + 1</button>
      <button onClick={() => {
          setRerender(!rerender);
        }}>Rerender</button>
    </>
  );
}

const CountDisplay = ({ count }) => {
  return <div>count : {count}</div>;
};

 

이 때 Rerender 버튼을 누르면 count (props로 들어가있는) 값이 변경되지 않더라도 계속 리렌더링 되고 있다.

이럴 때 memo를 쓰면 되는데, 위의 CountDisplay 컴포넌트를 인자로 넘겨주면 된다.

 

const CountDisplay = memo(({ count }) => {
  return <div>count : {count}</div>;
});