[React] Lifecycle Method 라이프 사이클

Lifecycle Method

라이브러리, 프레임워크들은 라이프 사이클을 가지고 있는데 

라이브러리가 동작하는 순서를 의미한다. 

 

 

 

will 접두사가 붙은 함수는 어떤 작업을 처리하기 직전에 호출되는 함수

예를 들어 혹시 마운트 되기전 해야 하는 작업이 있으면 

componentWillMount() 에 내용을 넣어준다. 

 

did 접두사가 붙은 함수는 어떤 작업을 처리한 후에 호출되는 함수이다.

컴포넌트 라이프 사이클은 크게 Mount, Update, UnMount 3가지로 분류된다

 

 

1. Mount 

페이지에 컴포넌트가 최초 심어지는 것을 말한다.

컴포넌트 라이프에서 딱 한 번만 일어난다. 

 

같은 앱 컴포넌트가 있더라도 

같은 것이 아니라 새 인스턴스가 생성된 것이다. 

 

Mounting is the first time a component gets placed onto the top. 

so the first time React renders a component onto the page that is mounting. 

 

The only time when a component might remount is unmount. 

it's completely removed from the DOM. 

It might be the same app component or the same component we're using, 

but it's a new instance of it. 

 

 

이 때 호출되는 Mount 메소드 순서 

constructor() -> getDerivedStateFromProps() -> render() -> componentDidMount()

 

constructor() : 

컴포넌트 클래스의 생성자 함수로 컴포넌트를 만들 때 처음으로 호출되는 함수이다. 

컴포넌트들 초기화를 해주는 단계

 

getDerivedStateFromProps:

props와 state 값을 동기화 할 때 사용하는 함수.

버전 v16.3 이후에 만들어 짐

 

render:

화면에 무엇을 보여줄 지 나타내는 함수

 

componentDidMount:

컴포넌트 생성, 첫 렌더링이 끝났을 때 호출되는 함수

서버와 통신하는 과정은 이 함수에서 수행한다. 

컴포넌트가 모두 구성된 직후인 componentDidMount() 함수에서 API 호출을 수행하면 효율적이다. 

 

예를 들어 학생 정보 웹사이트를 구성한 뒤 학생 목록 좀 보고 싶으면 해당 API를 호출하면 서버에서 보내주고 그 것을 화면에 보여주게 될 것이다. 

 

앱이 mounted 되었거나 리액트에 의해 render되었을 때 정보를 원할 것이다. 

 

when you make API request for sth like users, bz that's when you want to get that information so we can display it as soon as possible. 

So remember, if you need to make an API request

so that your component can have the appropriate data

it needs in order to render the appropriate things, that's when you want to put it in component that mount.

 

 

2. Update 

Component Update 시점에 호출되는 함수들

화면에 렌더링 하기 위해 props 또는 state를 사용한다. 

컴포넌트가 업데이트되는 경우는 

props 값 변경,

state 값 변경,

부모 컴포넌트가 리렌더링 될 때,

this.forceUpdate로 강제로 리렌더링 되는 경우가 있습니다.

 

 

리액트는 state 변화를 자동으로 감지하면

아래에 순서에 따라 함수를 호출한다. 

getDerivedStateFromProps() -> shouldComponentUpdate() -> render() ->

getSnapshotBeforeUpdate() -> componentDidupdate()

 

 

getDerivedStateFromProps :

마운트(Mount) 과정에서도 호출되었던 함수

 

shouldComponentUpdate :

컴포넌트를 리렌더링 할지 말지를 결정하는 함수

true를 반환하면 아래 함수들을 호출하여 업데이트에 따른 리렌더링을 진행하며

false를 반환할경우 리렌더링을 하지 않고 아래 함수도 실행되지 않는다.

 

render : 새로운 값을 사용하여 View를 리렌더링 한다. 

 

getSnapshotBeforeUpdate :

변경된 요소에 대하여 DOM 객체에 반영하기 직전에 호출되는 함수

 

ComponentDidUpdate :

컴포넌트 업데이트 작업이 끝난 리렌더링 후에 호출되는 함수

 

 

 

3. UnMount

컴포넌트가 언마운팅되면 리액트에서 삭제되었다 는 뜻이다

컴포넌트가 DOM에서 제거되는 것을 언마운트(UnMount)라고 한다.

 

호출되는 함수는 하나로 componentWillUnmount 함수

해당 컴포넌트가 제거되기 직전에 호출됩니다.

 

 

 

API는 node.js나 스프링과 같은 서버 언어가 만든 웹서버와 통신하는 방식으로 구현이 된다.

서버에서 고객 정보를 받아 와서 화면에 출력하고자 할 때

API 방식을 이용하여 이 데이터들을 받아온다.

서버 개발자와 API를 이용해 소통할 수가 있다

 

 

컴포넌트의 키포인트는 언제 렌더를 하고 언제 리렌더를 할지 결정하는 것이다.

lifecycle method를 알면 render 타이밍에 대해 더 잘 이해할 수 있다.

 

--출처-- 

https://lktprogrammer.tistory.com/130