리액트 컴포넌트가 생성되고, 렌더되고, DOM에 추가되고, 변경/삭제되는 모든 것이 Component Lifecycle

Component Lifecycle의 세 가지 파트

1. Mounting : 컴포넌트 호출 -> DOM에 렌더링
2. Updating : state, props 변화에 의해 컴포넌트가 바뀜
3. Unmounting : 컴포넌트가 DOM에서 지워질 때

Lifecycle method

우리가 이미 사용한 lifecycle 메소드

constructor()
mounting phase에서 처음으로 사용하는 메소드

render()
mounting phase에서 다음으로 사용하는 메소드
➡️ 이후 updating phased에서 re-render시 다시 사용

componentDidMount

setInterval()
정해진 시간마다 state를 업데이트 하도록 만드는 메소드

const oneSecond = 1000;
setInterval(() => {
  this.setState({ date: new Date() });
}, oneSecond);

1000ms = 1초마다 date라는 state를 업데이트하는 메소드

하지만 이 메소드를 어디에 사용해야할까?
➡️ 새로운 mounting phase lifecycle method인 componentDidMount()에 넣어준다

1. constructor
2. render()
3. componenDidMount() ➡️ 컴포넌트가 렌더링 된 이후에 선언

순으로 배치한다

💡
getDerivedStateFromProps()라는 메소드도 있음 (사용 빈도 낮음)
(constructor와 render 사이에 위치)

1초마다 업데이트하는 시계 컴포넌트

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }
  render() {
    return <div>{this.state.date.toLocaleTimeString()}</div>;
  }
  componentDidMount() {
    const oneSecond = 1000;
    setInterval(() => {
      this.setState({ date: new Date() });
    }, oneSecond);
  }
}

componentWillUnmount

componentDidMount()와 setInterval()을 통해 컴포넌트를 지속적으로 업데이트 시켰지만 그렇게 되면 페이지를 닫거나 새로고침 하기 전까지 끊임없이 업데이트 됨.

만약에 해당 컴포넌트가 unmount 되었어도 (렌더링에서 제외되었어도) 계속 돌아간다면 사용자에게 불필요한 자바스크립트 코드를 실행시키는 것
→ Memory leak 컴포넌트가 발생한 side-effect를 정리해야한다

.clearInterval()
setInterval이 리턴하는 ID 값으로 이 메소드를 취소시킬 수 있음

const oneSecond = 1000;
this.intervalID = setInterval(() => {
  this.setState({ date: new Date() });
}, oneSecond);
 
// Some time later...
clearInterval(this.intervalID);

여기서 우리는 아무때나 interval을 취소하는 것이 아닌, Clock 컴포넌트가 unmount 되었을 때 취소하고 싶음
➡️ componentWillUnmount() 에 해당 메소드를 사용한다 (unmounting phase lifecycle method)

unmount까지 대비한 clock 컴포넌트

export class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }
  render() {
    return <div>{this.state.date.toLocaleTimeString()}</div>;
  }
  componentDidMount() {
    const oneSecond = 1000;
    this.intervalID = setInterval(() => {
      this.setState({ date: new Date() });
    }, oneSecond);
  }

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

componentDidUpdate

componentDidUpdate()
update phase lifecycle method

컴포넌트 업데이트 = state나 props에 변화가 일어날 때
➡️ 대표적으로 두 가지 메소드가 실행됨
1. render() : 다시 렌더링이 일어남
2. componentDidUpdate() : update-phase 코드가 실행됨