React pure component

Creator

Creator

Seonglae Cho

Created

Created

2021 Apr 11 16:21

Editor

Editor

Seonglae Cho

Edited

Edited

2024 Feb 11 4:10

Refs

Refs

예전버전이라 지금도 그런지 몰겠지만

함수형 컴포넌트가 클래스보다 우위에 하긴 어렵다고 합니다. 오히려, React.PureComponent가 React.Component와 함수형 컴포넌트 보다 빠른것

하지만, Pure Component는 shallow level에서만 데이터를 비교하기 때문에,

복잡한 구조의 데이터는 비교하지 못하므로 결국엔 shouldComponentUpdate를 직접 다뤄야 하는 상황이 발생하므로, 모든 컴포넌트에 PureComponet를 사용하는것은 오히려 앱을 더 느리게도 할 수 있다니 주의를 해서 사용

PureComponent는 shouldComponentUpdate 라이프 사이클 메소드가 이미 적용 된 버전의 React.Component

리액트(React) 이해 기초 - Component vs PureComponent vs Functional Component

리액트(React)에서 컴포넌트를 만드는 방법에는 크게 클래스 기반(React.Component , React.PureComponent 를 확장(extends)해서 사용)과 함수 기반(Function Component )으로 나눌 수 있다. (React.createClass는 deprecated 되었고, 16 버전에서는 없어지기 때문에 제외 한다.) 이 글에서는 이 세 가지 방법의 다른 점을 비교 해보고(문법(syntax)은 제외), 퍼포먼스에 대한 얘기를 조금 해보도록 하겠다. 먼저, 클래스 기반 컴포넌트 ( React.Component, React.PureComponent)에 대해 알아보자.

리액트(React) 이해 기초 - Component vs PureComponent vs Functional Component

https://usecode.pw/react-%EC%9D%B4%ED%95%B4-%EA%B8%B0%EC%B4%88-class-vs-pure-vs-function-component/

리액트(React) 이해 기초 - Component vs PureComponent vs Functional Component

React - 리액트에서의 shallow compare 부터 React.PureComponent 까지

상황 리액트를 사용하여 개발할때, 위와 같은 상황에서는, setState는 무조건적으로 state를 업데이트하게 되고, 그에 따른 불필요한 렌더링을 하게 됩니다. 따라서 이를 방지하기 위해, 아래와 같이 2. shouldComponentUpdate 주기를 기존 클래스컴포넌트에 추가 를 적용시켜 문제를 해결할수 있습니다. | Shallow compare란? shallow compare는 equality를 체크하는것입니다. 숫자나 문자열 같은 scalar 값들을 비교할때, 그들의 값을 비 교합니다.

React - 리액트에서의 shallow compare 부터 React.PureComponent 까지

https://ideveloper2.tistory.com/159

React - 리액트에서의 shallow compare 부터 React.PureComponent 까지

Recommendations

////////////