Life cycle

컴포넌트에 있어서 중요한 순간

---

• 생성

  • 생성될 때
  • 화면에 등장한(mount) 후 => componentDidMount

• 업데이트

  • 새로운 props를 받을 때
  • 새로운 상태를 가질 때
  • 새로운 상태를 갖고 난 후 => componentDidUpdate

• 제거

  • 화면에서 사라지기(unmount) 전 => componentWillUnmount

  사라지기 전을 제외하고 매 중요한 순간마다 컴포넌트가 새로 렌더링(render)된다.

• 컴포넌트가 중요한 순간을 만날 때 클래스 컴포넌트안에 특별한 메소드를 사용할 수 있다. 이러한 메소드를 Life cycle method 라고 부른다.

  • componentDidMount -> 컴포넌트가 화면에 렌더링된 후
  • componentDidUpdate -> 새로운 상태를 갖고 난 후 (setState 이후)
  • componentWillUnmount -> 화면에서 사라지기 전

  

• Life cycle method는 클래스 컴포넌트에서만 사용 가능하다.

어디에 쓰이는가?

---

• componentDidMount, componentDidUpdate
  • render, constructor 에선 async/await을 사용할 수 없는데 이 때 Life cycle method를 이용하여 비동기 요청을 할 수 있다.
• componentWillUnmount
  • 메모리를 비워주거나 다 정리하는 경우 사용한다.

Life cycle 동작 과정

---

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <ToggleSwitch />
    </div>
  );
}

class ToggleSwitch extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOn: false };
    this.handleClick = this.handleClick.bind(this);
    console.log('생성');
  }

  handleClick() {
    this.setState((state) => ({ isOn: !state.isOn}))
  }

  componentDidMount() {
    console.log('mount');//mount된 이후
  }

  componentDidUpdate() {
    console.log('updated');
  }

  componentWillUnmount() {//unmount 되기 전
    console.log('unmount');
  }

  render() {
    console.log('렌더링');
    return (
      <div>
        <button onClick={this.handleClick}>
          {this.state.isOn ? 'ON' : 'OFF'}
        </button>
      </div>
    )
  }
}

• ToggleSwitch가 렌더링되면 constructor => render() => componentDidMount() 순서로 진행된다. 콘솔에는
  생성, 렌더링, mount 순서로 찍힌다.
• 위 사진을 보면 업데이트 할 때 New props, setState(), forceUpdate() 부분이 있다. 이 중 forceUpdate()는 잘 쓰이지 않기 때문에 넘어가겠다. 나머지 두 개는 화살표로 render를 가리키고 있다. 즉, 새로운 props가 부모로부터 넘어오거나 setState()가 호출되면 render()가 다시 호출되는 것을 의미한다.
  순서를 정리하자면 New props or setState() => render() => DOM 업데이트 => componentDidUpdate() 순서로 진행된다. 콘솔에는 렌더링, updated가 찍힌다.
• 마지막으로, 컴포넌트가 제거되는 경우 제거된 후 componentWillUnmount()를 실행한다. 콘솔에는 unmount가 찍힌다.