리액트 class형 컴포넌트

리액트 라이브러리를 학습하면서 컴포넌트를 만드는 방식은 두 가지 알고 있다 class, hooks

공통적으론 import React from "react";

class 방식에선

class 컴포넌트명 extends Component {} 방식과

class 컴포넌트명 extends React.Component

두 가지 방법을 사용했다.

차이라면 import 문에 {} 디스트럭처링 방식으로 component를 넣냐 마냐만 알고 있었는데,

React.PureComponent 방식으로 컴포넌트를 생성 시 state 값을 기존의 state와 비교하여 변화가 발생하였을 때만 렌더링 한다는 정보를 얻게 되었다.

정보가 사실이라면, 리액트 라이브러리는 state 값을 주시하고 있다가 '변화'가 생겼을 시 자동으로 렌더링 한다는 느낌으로 알고 있었는데 렌더링을 최소화할 수 있는 컴포넌트 *생성 방식을* 알아낸 것이다

예를 들어 카운터 예제에서 state에 0이 있다면, 기존 컴포넌트 방식으로는 0이 0으로 재할당되어도 렌더링이 되는 걸로 알고 있는데, PureComponent 방식을 사용한다면 1이든 -1이든 변화가 생겼을 때 렌더링 되어 성능이 좋아질 것으로 생각된다.

확인은 더 필요하다

 

import React from "react"; // 공통

import React, { Component } from "react";

class App extends Component {}

import React from "react";

class App extends React.Component {}

import React from "react";

class App extends React.PureComponent {}