4. React 생명주기

엄청 빠르게 돌아온 효그니가 이번에 설명할 것은 React Component의 생명주기입니다.

저번에 설명했듯이 Component 는 클래스형, 함수형 이 두 가지가 있다고 했었죠?

각각의 Component의 생명주기 방식이 다릅니다.

Class Component

class Test extends React.Component {
	componentWillMount() {
		console.log('componentWillMount');
	}

	componentDidMount() {
		console.log('componentDidMount');
	}

	componentWillReceiveProps(nextProps) {
		console.log('componentWillReceiveProps');
	}

	shouldComponentUpdate(nextProps, nextState) {
		console.log('shouldComponentUpdate');
		return true / false;
	}

	componentWillUpdate(nextProps, nextState) {
		console.log('componentWillUpdate');
	}

	componentDidUpdate(prevProps, prevState) {
		console.log('componentDidUpdate');
	}

	componentWillUnmount() {
		console.log('componentWillUnmount');
	}

	render() {
		return <div></div>;
	}
}

( 이걸로 끝이 아니라 더 있습니다.. 하와와.. 남고생쟝.. 눈아프다요...)

먼저 클래스형 Component의 생명주기입니다.

상당히 많지만, 위의 것들을 전부 사용할 필요는 없습니다!

React v17 부터는 componentWillMount, componentWillUpdate, componentWillReceiveProps가 비추천 됩니다.

( 원문 - deprecated )

쓰이지 않게 되거나 대체될 수 있습니다. 사용하시지 않는 것을 추천드립니다!

설명에 앞서 Mount, Update ( Props, State ), Unmount, Error 이렇게 크게 4가지로 분류하겠습니다.

Mount

컴포넌트를 처음 실행시켰을 때의 상태를 Mount라고 표현합니다.

<Test/> // 태그 형태로 사용했어서 헷갈릴 수도 있으시겠지만, 컴포넌트도 함수입니다!

state, props, context 저장 → componentWillMount → render() → componentDidMount

순으로 실행된다고 보시면 될 것 같습니다.

 

componentWillMount

Component가 Mount 되기 전 입니다.

주의할 점으로

1. componentWillMount 내에서 props, state를 바꿔서는 안됩니다. Mount 중이기 때문입니다.
2. DOM에 접근할 수 없습니다. render 함수가 작동되기 전이기 때문입니다.

componentDidMount

Component가 Mount 된 후 입니다.

will과는 다르게 DOM 에도 접근할 수 있습니다!

여기서 주로 서버에 데이터를 요청합니다.

아마 여러분이 개발하시면서 가장 많이 쓰일 생명주기입니다!

Update - Props

Props 가 업데이트 될 때의 경우에 발생합니다!

componentWillReceiveProps → shouldComponentUpdate → componentWillUpdate → render() → componentDidUpdate

순으로 실행됩니다.

componentWillReceiveProps

props가 변경되었을 때를 감지하고 가장 먼저 실행됩니다!

shouldComponentUpdate

componentWillReceiveProps 가 실행된 후 실행됩니다!

단어 뜻 그대로 진짜 Component 업데이트 할거야? 라는 기능을 갖고 있습니다.

	shouldComponentUpdate(nextProps, nextState) {
		console.log('shouldComponentUpdate');
		return true / false;
	}

true / false 를 통해 "render를 선택적으로 취소" 할 수 있습니다.

성능 최적화에 있어 중요하겠죠?

 

componentWillUpdate

Component가 업데이트 될 때 입니다.

주의할 점으로 여기서 state를 바꾸게 되면 componentWillUpdate가 한 번 더 일어나게 됩니다.

Mount 의 willMount와 비슷합니다.

 

componentDidUpdate

Component가 업데이트 된 후 입니다.

DOM에의 접근도 가능하고, state를 변경하셔도 됩니다.

Update - State

state가 업데이트 될 때 입니다. ( setState )

props의 업데이트와 과정이 같아 간략히 하겠습니다.

차이점으로는

1. componentWillReceiveProps 는 호출되지 않는다.
2. 메소드들이 바뀔 state에 대한 정보를 갖고 있으며, componentDidUpdate는 바뀌기 전의 state를 갖고 있습니다.

shouldComponentUpdate → componentWillUpdate → render() → componentDidUpdate

순으로 실행됩니다.

props의 update 와는 다른 점으로 state를 비교하며 업데이트 할 수 있습니다!

업데이트를 직접 비교하여 선택적으로 할 수 있는 것도 React의 강점 중 하나죠! 크윽 강해!

Unmount

Mount에 Un이 붙었네요? 컴포넌트가 제거될 때 입니다!

componentWillUnmount 이 있습니다. Did는 없습니다. 컴포넌트가 제거 되었기 때문에.. ( 죽은 자는 말이 없다.. )

주로 addEventListener등으로 추가한 리스너를 제거하거나, clear와 관련된 행동을 이 안에서 실행합니다.

Error

에러가 발생했을 때 입니다.

componentDidCatch

서버 통신에 실패했을 때의 에러 페이지 등을 만들 때 사용합니다. ( Error Boundary )

 

깃헙 에러 페이지입니다

Functional Component

클래스형 컴포넌트에 비해 무척이나 간단합니다.

추가된 hooks api를 사용하여 쉽고 간단하면서도 클래스형 컴포넌트에서 작동하는 기능을 사용할 수 있습니다.

import React, { useState, useEffect } from 'react';

const Test = () => {
	const [isOpen, setIsOpen] = useState(false); // 임의의 State

	useEffect(() => {
		console.log('componentDidMount');
		return () => { // 컴포넌트가 제거될 때 사용됩니다.
			console.log('componentWillUnmount');
		}
	}, []); // 배열에 아무 것도 없다면 첫 랜더링 때만 실행됩니다.

	useEffect(() => {
		console.log('componentDidMount + componentDidUpdate');
	}, [isOpen]); // 첫 랜더링, 배열 안의 값이 변할 때 실행됩니다.

	return <div></div>;
};

hooks api 중, useEffect를 사용합니다.

매우 간단하죠? 하핳!

클래스형 컴포넌트와는 다르게 업데이트에 있어 실행할 동작을 useEffect를 통해 추가합니다.

useMemo, useRef 등 다른 hooks api를 사용하여 심화된 생명주기와 기능을 다룰 수 있습니다.

hooks api에 대해서는 차후에 다루겠습니다!

이상으로 글을 마치겠습니다!

오늘도 열심히 하는 여러분들이 최고임돠 ^^7