리액트 "Memoization"

리액트는 함수형 컴포넌트를 기반으로 사용자에게 빠른 UI를 제공을 목적으로 한다.

리액트 특정상 리렌더링이 빈번히 일어나는데
리렌더링이 일어나는 경우는 다들 아시다시피

1. 해당 컴포넌트의 state값이 바뀔때
2. 부모 컴포넌트가 리렌더링 될때
3. 부모 컴포넌트로부터 props를 받았을때

이렇게 세가지로 볼 수 있다.
그런데 만약, 리렌더링 필요하지 않은 경우에도 리렌더링이 된다면 어떻게 될까?
연습용 조그마한 홈페이지 같은 경우는 크게 불편함을 느끼지는 못하겠지만
대형 사이트 같은 경우는 리렌더링의 최적화를 이루지 못해
브라우저에 과부하가 걸려 속도가 늦어지고
이게 곧 사용자에게 불만을 가져다 줄 수 있는 상황까지 이어질수 있다.

그럼 어떤 식으로 컴포넌트가 필요에 따라 리렌더링 될수 있게 할 수 있을까?

1.React.memo()

Higher-Order Components : 고차 컴포넌트
말이 어렵지만, 간단하게 말하면 React.memo() 인자값에 컴포넌트를 넣어
더 좋은, 향상된 컴포넌트를 리턴 시켜주는 똑똑한 함수이며
클래스형 컴포넌트, 함수형 컴포넌트 모두 사용 가능하다.

맨 처음 컴포넌트가 mount 되고 난 후 업데이트가 이루어 질 때
mount시점에서의 데이터 값과 업데이트 된 데이터를 비교 한 후,
값이 변경이 없으면 리렌더링을 건너뛰고,
값이 변경되었다면 리렌더링을 시키는 방법이다.

const Movie = () => {
return (

<div>
  <div>Movie title: {title}</div>
  <div>Release date: {releaseDate}</div>
</div>

);
}
export default React.memo(Movie);

export 하는 절에 React.memo() 에 인자값을 컴포넌트로 넣으면 처리가 되는 방법이 있고, 다른 방법으로는

const Movie = React.memo(() => {
return (

<div>
  <div>Movie title: {title}</div>
  <div>Release date: {releaseDate}</div>
</div>

);
)}
export default Movie;

이렇게 React.memo로 감싸서 처리구문을 마치 콜백함수 처럼 사용 하는 방법이 있다.

2.useMemo()

React.memo()와 같은 기능을 담당한다.
값이 바뀌어야지만 리렌더링되게 해주는 hook인데
React.memo()와 다른 점은 useMemo는 훅이다 보니, 함수형 컴포넌트 "안"에서만 사용이 가능하다.

const MyComponent =(x,y) => {
  const sum = add(x, y);
  return <div>{z}</div>;
}

라는 컴포넌트가 있다 가정하자.

부모 컴포넌트에서 받은 x,y값을 더해 화면에 표현하는 함수인 add가 있는데,
부모 컴포넌트가 리렌더링 되어 자식 컴포넌트까지 리렌더링 되었다.

만약 x,y값이 리렌더링 이전과 값이 같다면, 굳이 add 함수는 계속 실행이 되어야할 이유가 있을까?

이런경우에

const MyComponent =(x,y) => {
  const sum = useMemo(()=>add(x, y),[x,y]);
  return <div>{z}</div>;
}

를 사용해주면 된다.