React.js - state와 component life cycle

저번에 React에서 가장 중요한 개념이었던 component와 props에 대해 썼다.

그리고 항상 세트로 따라다니는 state와 component life cycle에 대해서 정리해보고자 한다.

 

state는 기본적으로 변수와 비슷한 개념이다.

변수인데 특별한 기능이 주어진 변수라고 생각해도 좋다.

 

기본적으로 state를 선언하는 법은 아래와 같다.

 

import React, { Component } from 'react'

export default class App extends Component {

  state = {
    myName: 'I am state!'
  }

  render() {
    return (
      <div>
        Nothing...
      </div>
    )
  }
}

 

이렇게 state를 생성하고, state를 사용하는 방법은 아래와 같다.

 

import React, { Component } from 'react'

export default class App extends Component {

  state = {
    myName: 'I am state!'
  }

  render() {
    return (
      <div>
        <span>{this.state.myName}</span>
      </div>
    )
  }
}

 

state가 출력 되었다.

기본적인 사용법은 변수와 크게 다르지 않고 간단하다.

그렇다면 state가 가진 특별한 기능이 무엇일까?

 

이에 대해 설명하려면 render, component life cycle을 같이 설명해야 한다.

우선 render에 대해서 알아보자.

 

react는 기본적으로 render함수를 통해 가상DOM을 구축하면서 개발하는 구조다.

render() = 보여주다. 렌더링. 같은 의미이다. 즉 보여주는 함수다.

render 함수는 한번만 불린다. 즉 component가 불렸을 때 한번 실행되는 구조다.

 

state는 이 render를 다루기 위해 사용된다.

말을 굉장히 어렵게 썼는데, 1차적으로 쉽게 요약하면

state가 변경될 때마다 가상DOM은 다시 렌더링 된다.

쉬운 예를 들면 아래처럼 들 수 있다.

 

import React, { Component } from 'react'

export default class App extends Component {

  state = {
    myName: 'I am state!'
  }

  _function = (() => 
    setTimeout(() => {
      this.setState({
        myName: 'I have changed!'
      })
    }, 5000)
  )()

  render() {
    return (
      <div>
        <span>{this.state.myName}</span>
      </div>
    )
  }
}

 

 

5초동안 setTimeout 후 this.state.myName을 'I have changed!' 로 바뀌도록 했다.

아래는 실행 결과다.

 

5초 후 결과가 바뀌었다.

 

즉 state는 값이 바뀔 때마다 바뀐 결과를 다시 렌더링 해주는 기능을 가지고 있다.

그런데 사실 그냥 바뀌는건 아니다. 이제 life cycle에 대해서 언급해야 한다.

2차적으로 요약하자면

state가 변경될 때마다 render되고, 모든 render는 life cycle을 거친다.

 

완전한 순서도를 요약하면 아래와 같다.

 

Component 불림 > render > state가 바뀜 > render
render가 될 때마다 life cycle을 거친다.

 

뭔가 복잡해지만 사실 편리하고 아주 체계적인 기능이다.

life cycle은 render가 될 때마다 진행되는 순서도의 개념이다.

 

우선 기본적으로 최초로 render 될 때의 life cycle은 아래와 같다.

 

constructor > componentWillMount > render > componentDidMount

 

생각보다 직관적인 구조다.

 

constructor는 component의 생성자라고 보면 된다.

constructor(props) {
  super(props);
}

componentWillMount는 render가 되기 직전 불리는 함수다.

componentWillMount() {

}

componentDidMount는 render가 된 후 불리는 함수다.

componentDidMount() {

}

 

즉 component life cycle이란 render가 되면서 거치는 일련의 과정이다.

 

사용법, 사용처는 굉장히 다양하다. 개인적으로 componentWillMount와 constructor는 아직 반드시 필요하다 싶은 상황을 겪지 못했다.

 

최초의 life cycle은 위와 같이 심플한데 props나 state값 상황에 따른 life cycle은 위보다 조금 복잡하다.

게다가 버전에 따라 새로 생기고 사라지고 하는 API가 너무 많다. 현 버전에서의 component life cycle API를 명확히 알고 싶다면 react 공식 문서를 참고하자

React.Component – React