리액트 성능최적화(1) - 리렌더링

얼마전 과제를 받아 프로젝트를 진행한 적이 있는데, 과제로 받았다고 하기엔 복잡도가 가볍다고 생각했고, 디자인패턴에만 집중된 과제라고 생각했는데 과제전형에 탈락했다 헤헤 답답한 마음에 아는 동생을 통해 코드리뷰를 받았는데, 기억에 남는 리뷰 중 미루고 미뤄왔던 '성능최적화'에 대해 이야기해보려한다.

리액트가 리렌더링 되는 경우
1. state 변경이 있을 때
2. 부모 컴포넌트가 렌더링 될 때
3. 새로운 props이 들어올 때
4. shouldComponentUpdate에서 true가 반환될 때
5. forceUpdate가 실행될 때

• 참조
  자바스크립트의 6가지 타입 중 객체를 제외한 원시 값들(number, string, null, undefiend..)은 참조 값이 아닌 값(value) 자체를 새로 할당하므로 값이 변경되면 서로 다른 값을 가지게 된다. (깊은복사)

반면 참조 타입인 객체는 하나의 값이 변경되면 다른 하나의 값도 동일하게 변경된다. (얕은복사)

리액트가 리렌더링 되는 1, 2번의 경우 ' 얕은 비교 ' 를 통해 새로운 값인지 아닌지를 판단한 후에 새로운 값인 경우에 리렌더링 하게 된다.

즉, 객체나 배열, 함수 등의 props는 상황에 따라 불필요한 리렌더링이 발생할 수 있다.

그래서 불변성을 유지해줘야하고, 불필요한 리렌더링을 막기위해 useCallback, useMemo를 사용하는 것이다!

반드시 다음편에 useCallback, useMemo 그리고, 성능최적화에 대한 글을 마무리 짓도록하겠다. (약속)