📘 React 공부하기 | Life cycle Method, setState

 

 

 

 

라이프 사이클이란?

인간의 생명주기를 나눈다면 배에서 태아가 생길 때, 인생에서 큰 사건을 만났을 때, 죽을 때로 나눌 수 있을 것 같다. 마찬가지로 리액트에서도 생명주기를 나눠볼 수 있다.

 

 

 

 

라이프 사이클은 총 3단계로 정의할 수 있다.

 

1. Mounting (생성)

mounting은 리액트에서 무언가가 consturctor안에서 생성될 때이다(화면에 무언가가 렌더링 되었을 때). mounting 단계에서는 props나 state를 변경해서는 안된다. 

 

2. Updating (업데이트)

updating은 어떤 것이 수정될 때를 말한다.

예를 들어 새로운 props를 받을 때, setState()를 실행할 때가 이 단계에 해당된다.

 

3. Unmounting (삭제)

unmounting은 컴포넌트가 삭제될 때이다. 

 

 

 

 

라이프 사이클 메서드

라이프 사이클이 동작될 때마다 각각에 알맞은 라이프사이클 메서드들이 실행된다. 

 

1. componentDidmount 

컴포넌트에서 나온 output이 DOM에 렌더링 된 후에 componentDidMount가 실행된다. 

 

2. componentDidUpDate

수정된 것이 렌더링 된 후에 componentDidUpdate가 실행된다. 

 

2. componentWillUnmount

컴포넌트가 사라진 후(DOM에서 삭제된 후) 실행된다.

 

 

 

 

라이프사이클 예시

아래 예제는 class 컴포넌트에서 라이프사이클 메서드를 이용하는 경우이다. 

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    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')
);

 

각각의 메서드들이 호출되었을 때 다음과 같은 일이 일어난다. 

 

1. [mounting]<Clock /> 컴포넌트가 ReactDOM.render() 함수에 전달이 되었을 때, 리액트는 Clock 컴포넌트의 constructor를 호출한다. 

 

2. [mounting]리액트는 Clock 컴포넌트의 render()함수를 호출하게 되고, 리턴된 값이 화면에 보여진다. Clock에서 렌더링 된 값과, DOM을 비교해서 DOM을 업데이트한다. 

 

3. [mounting]Clock에서 렌더링된 값이 DOM에 들어가게 됐을 때, 리액트는 ComponentDidMount()를 호출한다. ComponentDidMount 함수가 실행되면서 tick 함수가 1초에 한 번씩 실행된다. 

 

4. [updating]매 초마다 브라우저는 tick() 메서드가 실행되게 된다. Clock 컴포넌트에 ui는 setState()가 호출될 때마다 업데이트 된다. setState() 메서드 덕분에 리액트는 state가 변경되었다는 것을 알 수 있고, render() 메서드를 다시 호출하게 된다(화면이 계속 업데이트 된다).

이 때 render() 함수에 있는 this.state.date 값이 달라지게 되고, render의 output은 이미 업데이트된 time을 렌더링하게 된다. (그 후에 DOM업데이트)

 

5.  [unmounting]만약 DOM에서 Clock 컴포넌트를 삭제하게 되면, 리액트는 componentWillUnmount() 를 호출하게 되고, 타이머는 멈추게 된다. 

 

 

 

 

3 things about SetState()

 

1. state를 직접적으로 변경해서는 안된다.

this.state.comment = 'Hello';

그 이유는 컴포넌트가 다시 렌더링되지 않기 때문이다(화면 update X).

 

대신 setState 에 새로운 값을 object안에 넣어 넘겨주면 된다.

this.setState({comment: 'Hello'});

 

 

2. state는 비동기적으로 업데이트될 수 있다. 

 

this.setState({someField : someValue})

state를 변경할 때는 보통 위의 방법을 사용한다. 하지만 아래와 같이 현재 state의 값을 사용해서 state의 값을 업데이트하는 경우가 있다. 

this.setState({
  counter : this.state.counter + this.props.increment, 
});

위의 코드와 같이 직접적으로 this.state를 가져와 업데이트하는 경우 업데이트에 실패할 수 있다. 당장은 잘 실행될 지 모른다. 하지만 사용자가 많아지고 코드가 더 복잡해지면서 this.setState를 호출하는 곳이 많아지면 원하는 결과가 화면에 출력되지 않을 수 있다. 

 

그 이유를 리액트 홈페이지에서는 다음과 같이 설명하고 있다. 

 

 

여기서 가장 중요한 것은 비동기적으로 실행된다는 것이다. this.setState가 호출 될 때 즉시 DOM이 업데이트 되지 않는다. 

 

 

 

위와 같은 문제를 피하려면 아래와 같이 object 보다 함수 형식을 사용하면 된다. 

this.setState((stete, props) => {(
  counter : state.counter + props.increment
)})

 

 

 

3. state의 변경은 합쳐진다. 

 

예를 들어 아래와 같이 this.state에 여러 값이 들어있는 경우를 보자.

constructor(props){
  super(props);
  this.state = {
    posts: [],
    comments : []
  };
}

 

그리고 값들을 각각 따로 업데이트했다. 

  componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

this.setState({comments})는 this.state.posts의 값에 영향을 미치지 않고 업데이트 된다.  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[참고자료]

 

https://velog.io/@kym123123/%EB%B9%84%EB%8F%99%EA%B8%B0%EB%A1%9C-%EB%8F%99%EC%9E%91%ED%95%98%EB%8A%94-react%EC%9D%98-setState%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC

비동기로 동작하는 react의 setState에 대하여

 

https://medium.com/@wisecobbler/using-a-function-in-setstate-instead-of-an-object-1f5cfd6e55d1

Using a function in `setState` instead of an object

https://en.reactjs.org/docs/state-and-lifecycle.html

State and Lifecycle – React