React :: 생명주기 (Lifecycle)

생명주기 메서드

클래스 Component 에서 생명주기 메서드를 선언하여 컴포넌트가 마운트되거나 언마운트 될 때의 실행할 코드를 작성할 수 있다.

즉 Component 가 보여지고, 사라지고, 업데이트 될 때 호출되는 API 이다.

 

매우 중요하고, 사용하면 효율적인 프로그래밍을 할 수 있으니 잘 봐두자.

 

componentDidMount()

컴포넌트 추력물이 처음 DOM 에 렌더링 된 후에 실행되는 함수.

주로 외부 라이브러리와의 연동, Component 에서 필요한 데이터 요청 등을 여기에 작성한다.

componentDidMount() {
  //DOM 에 처음 Component 가 렌더링 될 때 실행됨
}

componentWillUnmount()

마운트된 컴포넌트가 DOM 으로부터 한 번이라도 삭제된 적 있다면 React 는 이 생명주기 메서드를 호출한다.

주로 setTimeout 을 걸어놓은걸 없애거나, 이벤트 처리, 외부 라이브러리 인스턴스 제거 등을 여기에 작성한다.

componentWillUnmount(){
    //DOM 에서 Component 가 삭제되면 실행됨
}

 

shouldComponentUpdate(nextProps, nextState)

이 메서드는 최적화하는 데에 많이 사용한다.

React 에서 어떤 컴포넌트가 리렌더링되면 (업데이트되면) , 그 컴포넌트의 자식 컴포넌트들도 리렌더링된다.

(렌더링된다는 것은 render() 함수가 실행된다는 것이다)

 

물론 변경 상항이 없다면 실제 DOM 조작은 일어나지 않다. 단지 Virtual DOM 에 렌더링을 수행할 뿐이다.

그렇다면 자식 Component 가 많다면, 그만큼 자원을 사용해서 부수적인, 쓸데없는 작업을 수행하게 될 수 있다.

 

따라서 업데이트가 필요하지 않는 Component 의 경우 이 메서드에서 false 를 반환해주면 된다.

default 는 true 를 반환하여, 업데이트를 수행하지만 false 를 반환한다면 해당 조건에서는 리렌더링, 즉 render() 을 호출하지 않게 되는 것이다.

shouldComponentUpdate(nextProps, nextState){
  return true; // default
  // return false;
}

 

componentDidUpdate(prevProps, prevState, snapshot)

이 메서드는 Component 에서 render() 을 호출하고 난 뒤에 호출된다.

이 시점에서는 props 와 state 가 바뀌어있기 때문에, 인자로 prevProps 와 prevState 를 볼 수 있다.

snapshot 값은 getSnapshotBeforeUpdate() 메서드에서 반환한 값이다.

 

 

getSnapshotBeforeUpdate()

이 메서드는 render() 호출 후, 실제 DOM 에 업데이트하기 전에 호출된다.

즉, 다음과 같은 과정이 Component Update 시 실행된다.

1. 렌더링 (render())
2. getSnapshotBeforeUpdate()
3. 실제 DOM 에 업데이트 (변화)
4. componentDidUpdate()

이 메서드를 통해 DOM 변화가 일어나기 직전의 DOM 상태를 가져와서 componentDidUpdate() 에서 확인할 수 있게 된다.

 

---

예제

React 공식 문서에 나와있는 시계 타이머 예제를 직접 해보자.

아래의 tick Component 는 시간이 변하는 것을 1000ms 마다 업데이트 해주는 기능을 수행한다.

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

그런데 tick Component 는 컴포넌트의 기능을 외부에서 제어해주고 있다.

 

그래서 이를 다음의 요구사항에 맞게 변경하고자 한다.

• Component 스스로 타이머를 설정
• Component 스스로 매초 업데이트
• 하도록 완전히 캡슐화하기!

이제부터 이 요구 사항을 만족시키는 Clock Component 를 작성할 것이다.

 

우선 스스로 타이머를 설정하기 제일 좋은 시점은 componentDidMount() 이고, 타이머를 멈출 시점은 componentWillUnmount() 가 적당하다.

즉, Clock Component 가 처음 DOM 에 렌더링되는 시점에 타이머를 설정하고, Clock Component 가 DOM 에서 삭제되는 시점에 타이머를 해제하려는 것이다.

componentDidMount(){
    this.timerId = setInterval(
      () => this.tick(),
      1000
    );
  }
  componentWillUnmount(){
    clearInterval(this.timerId);
  }

this.props 가 React 에 의해 스스로 설정되고, this.state가 특수한 의미가 있지만

데이터 흐름 안에 포함되지 않는 항목을 보관할 필요가 있다면,

여기 this.timerID 처럼 자유롭게 클래스에 수동으로 부가적인 필드를 추가해도 된다.

 

그리고 props 로 name 을 받아서 "Hello, {name}!" 을 보여주고, "It is {시간}" ㅇ을 보여줄 것이다.

따라서, 1000ms 로 변화하는 시간은 Clock 컴포넌트의 state 로 가지고, name 은 porps 에서 줄 것이다.

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

그럼 이러한 형태가 되겠다.

state 으로 시간을 담아줄 date 를 정의하였다.

 

그럼 이 date 를 1000ms 마다 업데이트해야 하는데, setState() 로 date 를 업데이트할 tick() 함수를 작성하자.

tick(){
    this.setState({
      date: new Date()
    });
}

이제 다 되었다. 전체 코드를 보고 흐름을 정리해보자.

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, {this.props.name} !</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock name="React"/>,
  document.getElementById('root')
);

1. ReactDOM 에게 Clock 컴포넌트가 props = {name: "React"} 로 전달되며, Clock 컴포넌트의 constructor 를 호출한다.
2. constructor 에서 this.state 를 초기화한다.
3. React 는 Clock 컴포넌트의 render() 메서드를 호출한다. 이를 통해 React 는 화면에 표시할 내용을 알게 된다.
4. React 는 Clock 의 렌더링 출력값을 일치하기 위해 DOM 을 업데이트한다.
5. Clock 출력값이 DOM 에 삽입되면 React 는 componentDidMount() 생명주기 메서드를 호출한다.
   (그 안에서 타이머를 설정한다. -브라우저에 타이머 요청)
   
6. 타이머를 설정한 대로, 매초 브라우저가 tick() 메서드를 호출해서 setState() 를 통해 현재 시간을 포함하는 객체를 호출하여 UI 업데이트를 진행한다.
7. setState() 를 통해 React 는 state 가 변화한 것을 인지하게 되고, 화면에 표시될 (변경된) 내용을 알아내기 위해 render() 메서드를 다시 호출한다.
   (이 때 달라진 this.state.date 를 DOM 에 업데이트한다.)
8. Clock 컴포넌트가 DOM 으로부터 한 번이라도 삭제된 적이 있다면 React 는 componentWillUnmount() 생명주기 메서드를 호출한다.
   (-> 타이머가 멈추게 된다.)
   

나는 React CRA 로 새 App 을 만들었을 때 자동으로 생기는 ./my-app/src/App.js 에서 이 Clock 컴포넌트를 사용하도록 작성해주었다.

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <div>
          <Clock name="React"/>	// here!!
        </div>
      </header>
    </div>
  );
}

그 결과 아래와 같은 결과물을 얻을 수 있었다.

기존의 React 화면에서 this.props.name 과 매초 변화하는 시간을 출력할 수 있다.

 

---

Reference

React 공식 문서 ko.reactjs.org/docs/state-and-lifecycle.html

.