라이프 사이클 함수


라이프 사이클?

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


라이프 사이클 함수

총 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)


저작자표시 비영리

'언어 > ReactJS' 카테고리의 다른 글

[React] 리덕스 개념  (0) 2019.05.24
[React] 함수형 컴포넌트  (0) 2019.05.21
[React] 컴포넌트 반복  (0) 2019.05.05
[React] Ref  (0) 2019.05.02
[React] 이벤트 핸들링  (2) 2019.04.25

+ Recent posts

티스토리툴바