리액트 생명주기(life cycle)

리액트 생명주기(life cycle)란?

리액트 컴포넌트는 실행되거나, 업데이트 또는 제거될 때 특정한 이벤트들을 호출하는 생명주기(life cycle)이 있다.

컴포넌트는 생성(mounting) -> 업데이트(updating) -> 제거(unmounting)의 생명주기를 갖는데

 

이러한 리액트의 생명주기는 클래스 컴포넌트에서만 사용할 수 있으며,
함수 컴포넌트에선 사용할수 없다. 사용하고 싶을 경우 리액트 Hook인 useEffect를 이용하여 비슷하게 작업을 할 수 있다.

 

리액트 생명주기

출처: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

 

앞서 위의 시점에서 발생하는 클래스 컴포넌트의 생명주기를 알아보자.

 

마운트(mount)

컴포넌트가 처음 실행될때 생성단계이다.

▶ constructor

컴포넌트 생성자 메서드, 컴포넌트가 생성되면 가장 먼저 실행되는 메서드
this.props, this.state에 접근이 가능하고 리액트 요소를 반환한다.

▶ getDerivedStateFromProps

props로부터 파생된 state를 가져오며 즉 props로 받아온 것을 state에 넣어주고 싶을때 사용한다

최초 마운트 시와 갱신 시,모두에서 render 메서드를 호출하기 직전에 호출된다.

▶ render

컴포넌트를 렌더링하는 메서드이며, 클래스 컴포넌트에서 반드시 구현돼야하는 유일한 메서드다.

▶ componentDidMount

컴포넌트가 마운트, 즉 첫번째 렌더링이 된 직후 호출되는 메서드

이 메서드가 호출되는 시점에는 화면에 컴포넌트가 나타난 상태이다.
여기서는 주로 DOM을 사용해야 하는 외부 라이브러리 연동, 해당 컴포넌트에서 필요로하는 데이터를 ajax로 요청, 등의 행위를 함.

 

업데이트(updating)

컴포넌트가 업데이트되는 시점에 다음과 같은 생명주기 메서드들이 호출된다.

 

▶ getDerivedStateFromProps

컴포넌트의 props나 state가 바뀌었을때 호출되는 메서드이다.

 

▶ shouldComponentUpdate

컴포넌트가 리렌더링 할지 말지를 결정하는 메서드다.

 

React.memo와 유사하며 boolean 반환으로 결정하며 false를 반환할 경우 업데이트 과정은 중단된다. 이 메서드를 따로 생성하지 않으면 언제나 true를 반환한다.

▶ componentDidUpdate

컴포넌트가 업데이트 되고 난 후 발생한다. 의존성 배열이 변할때만 useEffect가 실행하는 것과 같음

 

언마운트(unmount)

언마운트라는 것은 컴포넌트가 화면에서 사라지는 것을 의미한다.

▶ componentWillUnmount

컴포넌트가 화면에서 사라지기 직전에 호출하며 여기서 주로 DOM에 직접 등록했었던 이벤트를 제거하고, 만약에 setTimeout을 걸은 것이 있다면 clearTimeout을 통하여 제거를 한다.

 

Functional Componet에서의 생명주기는?

리액트에서 Hook을 사용하여 함수형 컴포넌트에서 React state와 생명주기 기능을 연동 할 수 있게 해주는데

이 함수들의 관한 정보는
Hook은 class 안에서는 동작하지 않고, class없이 React를 사용할 수 있게 한다. 

 

자세한 정보는 아래의 링크로..

React Hook (tistory.com)

React Hook