React - state, life cycle

1. state

state는 풀이하면 '상태'라는 뜻이다.

그러면 React에서의 state는 무슨 상태를 의미일까?

이전 블로깅에서는 component를 상류와 하류 props는 상류에서 하류로 전달되는 물들이라고 비유했다.

state는 현재 componenet의 '상태'. 즉, 고유하게 가지고 있는 인자이다.

설명이 모호한가..? 그렇다면 상류에서 하류로 가는 길목마다 댐이 하나씩 있다고 상상해보자

댐에서 하류로 물길(prop)을 내리기전 고여있는 물의 '상태'를  state에 비유할 수 있겠다.

 

<상류 하류 댐그림>

댐이 누군가에 의해 수동적으로 열리기 전 까지는 물의 양이 변하지 않는 것 처럼

state의 상태는 현재의 컴포넌트가 가진 고유한 특성이므로 누군가 바꿔주기 전 까지는 바꿔줄 수 없다.

 

만약, 바꿔주고 싶다면..? 

setState를 이용해 값을 변경시켜줘야 한다. 마치 댐을 작동시키는 것 처럼 말이다.

아래의 코드를 살펴보자

class 하류 extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      물: 고여있음    
    }
  }
  
  댐 열기() {
    this.setState({
      물: 흘러내림
    })
  }

    return (
      <li>
        style={style}        
        onClick={this.댐 열기.bind(this)}>
        {this.props.item}
      </li>
    )
  }
}

super(props)로 인해 상위 컴포넌트에서 받아온 props를 전달 받았다. (상속과는 다른 개념이므로 구분 할 것)

또한 자신의 고유한 특성으로 state 에 '물 : 고여있음' 이라는 특성을 담았다.

그리고 클릭 했을 때 댐 열기()를 하면 state가 '흘러내림'으로 변화시켰다.

요약하자면, state는 현재 컴포넌트의 '고유한 특성'으로 임의로 변경이 불가능하며 setState를 이용해야 변경이 가능하다고 할 수 있겠다.

 

2. life cycle (class 한정)

생명주기라는 용어를 듣고 처음엔 잘 와닿지 않았다.

생명을 지녔나..? 무슨 소리지..? 라는 생각을 가졌었는데

우리가 학교에서 첫 수업때나 ice-breaking때 그렸던 아래의 그래프가 기억나는가..?

생명주기 예

위의 그래프가 도입기-성장기-성숙기-쇠퇴기의 총 네단계로 나누어지는 것 처럼 

컴포넌트 다음과 같은 생명주기가 존재한다.

 

벨로퍼트님의 블로그에서 다음과 같은 자료들을 찾아냈다.

컴포넌트의 생명주기 by.벨로퍼트

엄청 많은 종류의 생명주기가 존재하며, 컴포넌트가 랜더링되고 종료될 때 까지의 세세한 함수가 내장되어 있기 때문에, 원하는 타이밍에 원하는 기능을 넣어서 마치 동영상 편집 시 원하는 구간에 원하는 효과를 넣는 것 세부적으로 기능을 구현할 수 있다.

그렇다면 어떤 것들이 있을까?(by.벨로퍼트)

 1) componentWillMount

DOM위에 컴포넌트가 랜더링 되기 전에 실행될 수 있는 메소드

 

2) componentDidMount

첫 랜더링을 다 마친 후 실행되는 메소드

보통 다른 JS프레임워크를 연동하거나, setTimeOut,  setInterval 및 AJAX 처리 등을 넣는다.

 

3) componentWillReceiveProps

하위 컴포넌트가 props를 받았을 때 실행 될 수 있는 메소드

props에 따라 state를 업데이트 해야 할 때 사용하면 유용하다. 이 안에서 this.setState()를 써도 추가로 랜더링 하지 않는다.(먹히지 않는다(?)) // 공부해볼것

4) shouldComponentUpdate

props나 state가 변경되었을 때, 리 랜더링을 할지 말지를 정하는 메소드

 

5) componentWillUpdate

컴포넌트가 업데이트 되지 전에 실행되는 메소드

이 메소드에서 setState()를 사용하면 무한 루프에 빠지게 된다.

 

6) componentDidUpdate

컴포넌트가 재랜더링이 끝나면 실행되는 메소드이다.

 

7) componentWillUnmount

컴포넌트가 DOM에서 사라진 뒤 실행되는 메소드이다.