[React] Component와 PureComponent로 알아보는 state

 

 

✿  React는 component로 이루어져 있다.

      ❀  component는 데이터를 가지고 있는 state, 사용자에게 어떻게 보일지 정하는 render() 로 이루어져 있다.

✿  React는 Re-render the whole app on every update - 즉 데이터가 조금이라도 업데이트 되면 전체적으로 애플리케이션 리랜더가 이루어 진다.

 

---

 

✿  component는 class 혹은 function으로 구현할 수 있다.

      ❀  class로 구현하는 방법은 React.Component 그리고 React.PureComponent

      ❀  function으로 만들 수 있는 방법은 function, memo(function) 그리고 React Hook

✿  클래스 컴포넌트와 같이 state와 lifecycle method를 이용할 수 있다.

 

✿  ReactDOM이라고 하는 라이브러리를 이용, 최상위 컴포넌트 연결

✿  React.StrictMode는 개발하는 과정에서만 두 번씩 호출하며 리액트가 자체적으로 잘못 된게 없는지 확인, 나중에 배포할 때는 한번씩 호출해준다. JS에 'use strict' 같은 것

 

✿  그래서 리액트를 구현하고 테스트 한다고 컴포넌트마다 콘솔창을 입력한다고 했을 때 전체가 다 불려짐.

✿  그럼에도 성능이 괜찮다고 하는 이유는?

      ❀  리액트의 VDOM(virtual DOM)이 필요한 요소만 업데이트 해주기 때문

      ❀  즉 state가 변화되면 전체적으로 연결되어 있는 render 함수가 호출 되는데, VDOM이 실제로 변화된 것만 비교해서 업데이트 해주기 때문에 (비교는 메모리상에만 하고) 성능이 괜찮다고 하는 것임 

 

✿  React Developer Tools 설정화면에서 실제로 render되는 모습을 확인할 수 있다. (티스토리도 리액트로 구현됨)

 

랜더되는 부분이 호출될수록 하이라이트가 연해짐

✿  랜더가 필요없는데 굳이 전체적으로 하고싶지 않다면 pureComponent나 memo 함수를 사용

      ❀  state나 prop에 변화가 없다면 render() 호출이 안됨

 

출처: React 공식 사이트(React.PureComponent)

✿  pure와 그냥 component의 차이는 shouldComponentUpdate()라는 component 업데이트 여부를 물어보는 함수의 호출 여부

      ❀  얕게 비교하는게 핵심포인트

      ❀  만약 prop안에 네 가지 데이터가 있고, 그 데이터가 object라면?

      ❀  그리고 그 object 안에 있는 data가 계속 변한다면?

      ❀  그래도 동일한 object 그래서 render()가 호출되지 않는다.

✿  얕은 비교를 하기 때문에, state를 바로 수정하지 못했던 것이고, setState를 통해 object 전체를 업데이트 해주었던 것

      ❀  변경되는걸 따로 빼서 전달해주던지

      ❀  object를 복사해서(spread syntax 등) 변경된 object를 return