면접에서 이런 질문을 받았다. 일반 컴포넌트와 순수 컴포넌트의 차이를 아시나요?
흠.. 면접에서 처음 알게된 순수 컴포넌트에 대해 정리해보고자 한다 ^--^
우선 React.Component는 ES6 class를 사용하여 react 컴포넌트를 정의할 때에 기초가 되는 class다.
그럼 React.PureComponent란 무엇인가?
React.PureComponent
React.PureComponent는 React.Component와 비슷하다. React.Component는 shouldComponentUpdate()를 구현하지 않지만, React.PureComponent는 props와 state를 이용한 얕은 비교를 구현한다는 차이점만이 존재한다.
한편, React.Component는 바뀔 값과 현재 값을 비교해주지 않으므로 매번 컴포넌트가 변경되면 (props,state값이 변경되면) 불필요한 렌더링을 다시 수행한다.
React.PureComponent를 확장해서 컴포넌트를 만들면, shouldComponentUpdate메서드를 선언하지 않았다고 하더라도, PureComponent내부에서 props와 state를 shallow level 안에서 비교하여, 변경된 값이 있을 시에만 리렌더링하도록 되어 있다.
얕은 비교란 무엇인가?
props와 state의 이전 값과 바뀔 값을 비교할 때, 얕은 비교를 수행하게 되는데, 원시형 값에 있어서는 같은 값을 가지는지 확인한다. (1은 1과 같고, true는 true와 같다)
그리고 객체와 배열같은 복잡한 자바스크립트 값에 있어서는 참조하고 있는 객체가 같은지 확인한다.
객체에서 얕은 비교는 어떻게 이루어지는가?
const A = { foo: 123, bar: 456 }; const B = { foo: 123, bar: 456 }; const C = A; console.log(A == B); // false console.log(A === B); // false console.log(A == C); // true console.log(A === C); // true console.log(B == C); // false console.log(B === C); // false
shouldComponentUpdate
각각의 컴포넌트들은 shouldComponentUpdate라는 메소드를 가지고 있다. 이는 state가 변경되거나 부모 컴포넌트로부터 새로운 props를 전달받을 때 실행된다. 리액트는 이 메소드(shouldComponentUpdate)의 반환 값에 따라 re-render를 할지에 대한 여부를 결정하게 된다.
기본적으로 shouldComponentUpdate메소드는 true를 반환한다. 하지만 React개발자는 re-render를 원하지 않는 경우에, 이 return value를 false로 오버라이드 할 수 있다.
절대로 직접 변경하지 말아라.
props와 state내부에 있는 오브젝트와 배열 값을 직접 변경하지 말아야 한다. 만약 부모 컴포넌트에서 순수 컴포넌트인 자식 컴포넌트의 props로 제공되는 오브젝트를 직접 변경했다고 해도 순수 컴포넌트는 업데이트 되지 않는다.
왜냐하면 순수 컴포넌트가 오브젝트 혹은 배열에 있어서는 이전 값과 레퍼런스를 비교하기 때문이다.
따라서, 이런 방법 대신, [...array],{...obj}같은 방법으로 완전히 새로운 오브젝트 또는 배열을 생성하는 방법을 사용하는 것이 좋다.
참고:https://medium.com/@async3619/when-to-use-component-or-purecomponent-b810897a19a2
https://jaeyeophan.github.io/2018/01/02/React-tips-for-beginners/
