[ Class component ] Component, Pure Component, LifeCycle

React

1. Class 

  1) Component

  2) Pure Component

 

rcc (기본골격)

 

Componet는 HTML DOM에서 업데이트된 부분만 바뀌지만,

Deep Copy로 render 함수는 자식요소 하나만 바껴도 그 위의 부모, 부모, 최상단까지

렌더함수가 호출이 된다.

 

반대로,

Pure Component는 Shallow , 얕은복사이다.

자체적으로 오브젝트의 내용을 비교해 바뀐부분만 렌더함수를 호출해주지만,

얕은복사이기때문에 같은 오브젝트 안에서의 데이터변화는 같다고 인식해

렌더함수를 호출하지 않는다.

-> 새로운 배열을 생성해주면서 만들거나 변수 하나하나를 props로 넘겨줘야한다.

 

*LifeCycle 메소드

원하는 상황에따라 필요한 함수를 구현해놓으면, 

리액트가 알아서 그 상황에맞으면 호출해준다.

 

componentDidMount : 컴포넌트가 UI상으로 등록될때, 사용자에게 보여질 때 호출 

componentWillUnmount : 컴포넌트가 UI상에서 지워질 때 호출

 

https://reactjs.org/docs/state-and-lifecycle.html

 

 

2. Function

 

rsi(기본골격)

 

  1) function

  2) memo : Class로 치면 Pure Component와 비슷 

memo라는 함수 안에 코드작성!

-> props가 변경이 안되면 안에있는 함수 호출이 안됨   

 

3) react Hook