[React] 라이프 사이클 함수

라이프 사이클 함수

라이프 사이클?

모든 리액트 컴포넌트에는 라이프 사이클(수명 주기)이 존재합니다. 라이프 사이클은 컴포넌트가 생성되고 소멸될 때까지 일련의 과정을 의미 합니다.

라이프 사이클 함수

총 10가지의 함수가 존재하며, will이 붙은 함수는 어떤 작업을 하기 전에 실행되고, did가 붙은 함수는 작업을 한 후에 실행됩니다.

라이프 사이클 함수를 사용 하는 경우

어떤 작업을 수행할 때 렌더링 할 때 처리해야 하는 경우가 있고 업데이트 전후로 처리해야 하는 경우가 있는데 이럴 경우 라이프 사이클 함수를 이용해서 처리합니다.

컴포넌트의 라이프 사이클

마운트(페이지에 컴포넌트가 나타남) -> 업데이트(리렌더링) -> 언마운트(페이지에서 컴포넌트가 사라짐)

마운트?

DOM이 생성되고 웹 브라우저상에 나타는 과정

업데이트? 

컴포넌트를 업데이트 하는 경우로 아래와 같은 경우에 동작합니다.

1) Props가 바뀔 경우

2) state가 바뀔 경우

3) 부모 컴포넌트가 리렌더링 할 경우

4) this.forceUpdate로 강제로 렌더링을 트리거 할 경우

언마운트?

마운트의 반대 과정으로 DOM에서 컴포넌트를 제거하는 과정

관련 함수

1) render()

컴포넌트 모양새를 정의

이 함수 안에서 this.props, this.state에 접근

리액트 요소를 반환, 아무것도 보여주지 않는다면 null이나 false를 반환

state를 변형하면 안되고 웹 브라우저에 접근해서도 안됨 => DOM 정보를 가져오거나 변화를 줄 떄에는 componentDidMount에서 처리해야 함

2) Constructor()

Constructor(props) {...}

컴포넌트를 처음 만들 때 사용

초기 state설정

3) getDerivedStateFormProps()

리액트 v16.3 이후에 새로 만든 라이프사이클 함수

props로 받아온 값을 state에 동기화 시키는 용도로 사용

컴포넌트를 마운트하거나 props를 변경할 때 호출

4) componentDidMount()

componentDidMount(){...}

컴포넌트를 만들고 첫 렌더링을 마친 후 실행

다른 자바스크립트 라이브러리나 프레임워크의 함수 호출, 이벤트 등록, setTimeout, setInterval, 네트워크 요청 등 비동기 작업 처리

5) shouldComponentUpdate()

shouldComponentUpdate(nextProps, nextState) {...}

props또는 state 변경 시 리렌더링을 시작할지 여부를 지정하는 함수

반드시 true & false 반환 해야함

현재 props, state 변경은 this키워드를 붙이고 새로 설정할 props, state는 nextProps, nextState로 접근

  6) getSnapshotBeforeUpdate()

v16.3 이후 만든 메소드

ender 메소드를 호출한 후 DOM에 변화를 반영하기 바로 직전에 호출하는 함수

componentDidUpdate에서 세번 째 파라미터인 snapshot 값으로 전달 받을 수 있는데 주로 업데이트 하기 직전의 값을 참고할일이 있을 때

  7) componentDidUpdate()

componentDidUpdate(prevProps, prevState, snapshot) {...}

prevProps, prevState 사용하여 이전에 가졌던 데이터에 접근

getSnapshotBeforeUpdate에서 반환한 값이 있다면 여기서 snapshot 값을 전달 받을 수 있음

8) componentWillUnmount()

componentWillUnmount(){...}

DOM에서 제거할 때 실행

componentDidMount에서 등록한 이벤트, 타이머, 직접 생성한 DOM이 있다면 여기에서 제거 작업

---

예제

아래 예제는 함수가 언제 동작하는 지 확인해보기 위해 작성한 예제입니다.

색을 랜덤으로 업데이트 하는 버튼과 숫자를 올려주는 버튼 두개로 구성됩니다.

숫자가 4로 끝날 경우에만 리렌더링 되지않고, 나머지 숫자일 때에는 업데이트가 발생하면 리렌더링 됩니다.

LifeCylce.js

import React, { Component } from 'react';

class LifeCycle extends Component {

state ={

number : 0,

color : null

}

myRef = null;

constructor(props){

super(props);

console.log('constructor()');

}

static getDerivedStateFromProps(nextPorps, prevState){

if(nextPorps.color !== prevState.color){

return {

color:nextPorps.color

};

}

return null;

}

componentDidMount(){

console.log('componentDidMount()');

}

shouldComponentUpdate(nextPorps, nextState){

console.log("shouldComponentUpdate(),", nextPorps,",", nextState);

return nextState.number %10 !==4;

}

componentWillUnmount(){

console.log("componentWillUnmount()");

}

handleClick = () =>{

this.setState({

number : this.state.number +1

});

}

getSnapshotBeforeUpdate(prevProps, prevState){

console.log('getDerivedStateFromProps()');

if(prevProps.color !== this.props.color){

return this.myRef.style.color;

}

return null;

}

componentDidUpdate(prevProps, prevState, snapshot){

console.log('componentDidUpdate()');

if(snapshot){

console.log('업데이트 되기 직전 색상 : ',snapshot);

}

}

render() {

console.log('render()');

const style={

color:this.props.color

}

return (

<div>

<h1 style = {style} ref={ref=>this.myRef=ref}>

{this.state.number}

</h1>

<p>color : {this.state.color}</p>

<button onClick={this.handleClick}>plus</button>

</div>

);

}

}

export default LifeCycle;

app.js

import React, { Component } from 'react';

import './App.css';

import LifeCycle from './component/LifeCycle';

function getRandomColor(){

return '#'+Math.floor(Math.random()*16777215).toString(16);

}

class App extends Component {

state = {

color : '#000000'

}

handleClick = () =>{

this.setState({

color : getRandomColor()

});

}

render() {

return (

<div>

<button onClick={this.handleClick}>Random Color</button>

<LifeCycle color={this.state.color}/>

</div>

);

}

}

export default App;

동작결과

처음 렌더링 된 후 찍힌 결과입니다. 생성자 함수, getDerivedStateFromProps함수, render함수 componentDidMount 함수가 차례대로 실행 됩니다.

초기 렌더링 후 화면입니다.

랜덤 버튼과 플러스 버튼을 클릭했을 때의 결과 입니다. 숫자가 4로 끝나는 경우에만 리 렌더링 되지않고 나머지의 경우에는 리 렌더링 됩니다.

랜덤버튼 클릭

플러스 버튼 클릭

두 버튼을 클릭했을 때 바뀌는 화면입니다.

---

참고 : 리액트를 다루는 기술(저:VELOPERT)