3월 기술면접대비 - React의 LifeCycle ( LifeCycle Method )

 

 

리액트( React )의 Class Component 에도 라이프사이클이 존재합니다.

 

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

 

 

 

라이프사이클 메서드는 총 9가지입니다.

Will 접두사가 붙으면 어떤 작업을 작동하기 전에 실행되는 메서드

Did 접두사가 붙으면 어떤 작업을 작동한 후에 실행되는 메서드

 

그리고 라이프사이클은 총 3가지 종류로 나누어집니다.

1. 마운트 ( Mount ) : 페이지에 컴포넌트가 나타남

2. 업데이트 ( Update ) : 컴포넌트 정보를 업데이트 ( 리렌더링 )

3. 언마운트 ( Unmount ) : 페이지에서 컴포넌트가 사라짐

 

 

마운트

DOM이 생성되고 웹 브라우저 상에 나타나는 것을 마운트라고 합니다.

이 때 호출되는 메서드들은 다음과 같습니다.

 

1. constructor 메서드 : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
2. getDerivedStateFromProps 메서드 : props 에 있는 값을 state 에 넣을 때사용하는 메서드
3. render 메서드 : 준비한 UI를 렌더링하는 메서드
4. componentDidMount 메서드 : 컴포넌트의 첫번째 렌더링이 마치고 나면 호출되는 메서드

 

 

업데이트

리액트에서 컴포넌트가 리렌더링 되는 조건은 다음과 같습니다.

 

• props 가 바뀔 때
• state 가 바뀔 때
• 부모 컴포넌트가 리렌더링될 때
• this.forceUpdate 로 강제로 렌더링을 트리거할 때
  
  

이러한 경우로 컴포넌트가 리렌더링될 때 호출되는 메서드들은 다음과 같습니다.

 

1. getDerivedStateFromProps 메서드 : props 에 있는 값을 state 에 넣을 때사용하는 메서드 (마운트에서도 호출됨)
2. shouldComponentUpdate 메서드 : 컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정하는 메서드 ( true 를 반환하면 리렌더링, false 면 리렌더링 하지 않음.)
3. render 메서드 : 준비한 UI를 렌더링하는 메서드
4. getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 직전에 호출하는 메서드
5. componentDidUpdate : 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드

 

 

언마운트

컴포넌트를 DOM에서 제거하는 것을 언마운트라고 하며 이때 호출되는 메서드는 다음과 같습니다.

 

1. componentWIllUnmount : 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는메서드

 

 

 

 

 

 

컴퓨터 시스템의 모든 자원은 라이프사이클( LifeCycle : 생애 주기 )를 갖습니다.

고로 JavaScript의 자원들( 값, 변수, 함수 등 )도 라이프사이클을  갖습니다.
생애주기는 생성 → 사용 → 소멸 되는 메커니즘을 의미합니다.
자원은 유한하므로 효과적으로 사용하기 위해 고안된 방식입니다.

 

JS에서의 자원은 값을 의미하며 모든 값은 저장됩니다.

그 저장소를 스코프( scope )라고 부릅니다.

JS의 스코프는 Global > Function > Block 레벨 순으로 범위가 넓습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

reference.

벨로퍼트와 함께하는 모던 리액트.25.LifeCycle Method.https://react.vlpt.us/basic/25-lifecycle.html

Today I learned.[리액트를 다루는 기술]7장 - 라이프사이클 메서드.https://www.yes24.com/Product/Goods/78233628?Acode=101