[React]리액트 기초부터(6)

LiftCycle API

-

-

-

Mounting

컴포넌트가 브라우저 상에 나타난다는 것을 의미한다.

 

constructor(생성자)

- 생성자함수 만든 컴포넌트가 처음 브라우저 상에 나타날 때 만들어 지는 과정에서 가장 먼저 실행되는 함수

- 컴포넌트가 가지고 있을 State 초기 설정과 같은 컴포넌트가 만들어지는 과정에서 미리 해야할 작업이 있다면 이곳에서 처리한다.

 

getDerivedStateFromProps

- Props로 받은 값을 State로 그대로 동결시키고 싶을 때 사용한다. (Mounting, Updating 과정에서 사용)

 

render

- 어떠한 dom을 만들게 될지 정의한다.

- 내부에 있는 태그들은 어떤 값을 전달해주게 될지 정의한다.

 

componentDidMount

- 실제로 브라우저에 나타나게 되면 호출된다.

- Chart 라이브러리와 같은 것을 사용하게 된다면 특정 Dom에 Chart를 그려달라고 하거나, 네트워크 요청/API (AJAX) 요청을 처리 할 수 있다.

- 컴포넌트가 나타난 다음에 event Listening 작업을 할 때 또는, API를 요청할 때 사용한다.

 

Updating

컴포넌트의 Props가 바뀌거나 State가 바꼈을 때

 

getDerivedStateFromProps

- Props의 값을 state에 동기화시킬 때 사용한다.

 

shouldComponentUpdate(중요)

- 컴포넌트가 업데이트되는 성능을 최적화 시키고 싶을 때 사용한다.

- 컴포넌트는 기본적으로 부모 컴포넌트가 ReRendering이 된다면 자식도 render함수가 실행이 되도록 되어있는데 이과정이 불필요할 수 있다. Virtual dom에서 rendering을 할지 말지 결정할 때 사용한다.

- true/false 값을 반환할 수 있다. true 값을 보낸다면 render과정을 거칠 수 있고 false를 반환하면 render를 하지않고 화면에도 반영되지 않는다.

 

getSnapshotBeforeUpdate

- render 함수가 호출된 후 호출된다.

- rendering을 한 다음에 결과물이 브라우저 상에 반영되기 바로 직전에 호출되는 함수

- 스크롤의 위치, 해당 dom의 크기를 사전에 가져오고 싶을 때 사용한다.

 

componentDidUpdate

- 작업을 마치고 컴포넌트가 업데이트 되었을 때 호출되는 함수

 

 

Unmounting

컴포넌트가 브라우저 상에서 사라지는 과정을 의미한다.

 

componentWillUnmount

- 컴포넌트가 사라지는 과정에서 호출된다.

- componentDidMount에서 설정해놓은 Listener를 없애는 작업을 한다.

 

 

 

 

*이 글은 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌를 토대로 공부를 하며 작성하였습니다.