React.memo ?

컴포넌트는 기본적으로 props, state, comtext 이 변경되면 리렌더링이된다.

다만 부모 컴포넌트에서 변경되면 자식컴포넌트또한 리렌더링되게되는데

만약에 자식컴포넌트는 변함이없는데 부모컴포넌트 때문에 자식까지 불필요하게 리렌더링된다면?

이것은 자원낭비이다.

이를 막아주는 훅으로 React.memo 의 인자로 들어가는 컴포넌트들의 props 들을 확인한다.

입력되는 모든 props 의 신규값을 확인한뒤 기존의 props 값과 비교하여 리액트에 전달한다.

값이 바뀐경우만 컴포넌트를 재실행 한다. 이렇게 성능 최적화를 하게된다.

이말은 틀렸다. 결국에 해당 컴폰너트 들의 props들을 비교하기위해서 드는 성능비용이 필요하다.

이 성능비용과 불필요하게 렌더링되는 비용간에 차이가 유의미하게 있다면 적용해볼만하나 ?

모든 컴폰너트에 적용하여 props 들을 비교하는 성능비용을 한다면 오히려 더 안좋을수있다.

그렇기때문에 적재적소에 사용해야 성능을 향상 시킬수있다.

컴포넌트에서 proprs 가 원시값이라면 동일한 값이면 정상적으로 React.memo 를통해 리렌더링되지않는다.

다만 ? 컴포넌트에서 넘겨주는 props 값이 참조값이라면 ?

이때는 React.memo 에서 정상적으로 작동하지만 렌더링되게된다.

이문제는 자바스크립트에대한 이해가 필요한데

React.memo 에서는 기존 props 값과 신규값들을 비교한다고했다.

이는 일치연산자를 통해서 비교하게되는데 ( === )

false === false // true

[ 1,2,3] === [1,2,3] // false

원시값은 일치연산자를 통해서 확인하면 예상했던 결과가 나온다

다만 참조값은 참조하고있는 값이기때문에 참조하는값이 동일하지않다면 일치연산자에서 false 가 나오게된다.

이는 리액트에서 함수나 객체 등 참조하는값들을 모두 다시 새로 생성하기때문에
같은 값이라도 참조하는 값이 다르다.

그렇게 때문에 props 의 변경사항이없어도 참조하는값이 다르기때문에 React.memo 에서 다르다 판단하여 렌더링이 일어나게된다.

그렇다면 참조값들은 React.memo 를 사용할수없는것일까?

useCallback Hook ?

컴포넌트 실행 전반에 걸쳐 함수를 저장할수있게 하는 훅이다.

선택한 함수를 리액트 내부 저장공간에 저장해서 함수 객체가 샐행될때마다 이를 재사용할수있게 만들어준다.

간략하게 함수의 재생산을 막는 훅이다

추후에 useCallback 에 대해서 따로 TIL 을 작성하겠다.