REACT 공식 문서 정리 - 6. State 와 생명주기

6. State 와 생명주기

6.1 State의 정의

State는 React Component Class의 instance이다.

Component의 동작을 제어하는 관측 할 수있는 속성 집합의 개체로 정의 된다.

Component의 State는 Lifetime에 따라 변경될 수 있는 정보를 보유한 객체이다.

 

6.2 Props와 State의 차이.

Props는 변하지 않는 속성을 가지고 있다.

State는 시간이 지남에 따라 변경 될 수 있는 데이터를 가지고 변경 후 동작을 제어하는데 사용되는 관찰 가능한 개체이다.

State는 컴포넌트 안에서만 사용할 수 있는 반면 Props는 제한이 없다.

 

6.3 생명주기(Life Cycle)

• 클래스 컴포넌트와 함수형 컴포넌트의 생명주기는 동일하게 동작한다.

 

6.3.1 리액트 컴포넌트 라이프 사이클 4단계

1. Initialization : props와 state를 초기화 한다.

 

1. Mounting :  render() 메서드에서 반환 한 JSX를 렌더링 하는 단계이다.

• componentDidMount() : 

• DOM에 마운트 된 후(render() 함수 뒤에) 호출된다.

 

1. Update : State 또는 Props가 갱신되면 발생한다.

• shouldComponentUpdate(nextProps, nextState) : 

• 현재 State 또는 Props의 변화가 컴포넌트 출력 결과에 영향을 미치는지 여부를 React가 알 수 있다. 기본 동작은 매 State 변화마다 리렌더링을 수행하는 것이다.
• componentDidUpdate(prevProps, prevState, snapshot) : 

• State가 업데이트 된 후에 실행된다.

 

1. Unmounting : Dom에서 컴포넌트를 마운트 해제하는 단계이자, 라이프 사이클의 마지막 단계 

• componentWillUnmount() : 컴포넌트가 DOM 상에서 제거될 때 호출된다.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
 
componentDidMount() { // 마운트 후에 interval 함수로 1초마다 반복 설정.
this.timerID = setInterval(
  () => this.tick(),
      1000
  );
}
 
componentWillUnmount() { // 언마운트시 invterval 함수 해제
  clearInterval(this.timerID);
}
 
tick() { // interval 함수가 1초마다 setState를 갱신하게 하여 리렌더링 함.  
  this.setState({
      date: new Date()
    });
  }
 
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
 
ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

직접적으로 수정시 리렌더링 하지 않는다.

state 업데이트는 비동기적일 수도 있다.

state값을 인자로 가져와서 작업함으로써 비동기 상황을 방지한다.

// ERROR 코드
this.setState({
  counter: this.state.counter + this.props.increment, // 예상한 값과 달라질 수 있음.
});
// SUCCESS 코드
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));