[React] 리액트 생명주기

Yeongju Yun·2022년 6월 10일
0

React

목록 보기
3/8

생명주기

생명주기(Life cycle)는 클래스 컴포넌트에 적용된다. 생명주기란 앱이 실행되고 종료되는 과정을 특정 시점 별로 나눠둔 것을 말한다. 파이썬의 클래스 객체로 예를 들면, 클래스가 생성되면 생성자가 호출되고 소멸되면 소멸자가 호출된다. 간단하지만 이러한 요소의 시작과 끝이 바로 생명주기이다.

React의 생명주기

React의 생명주기는 컴포넌트가 이벤트를 다룰 수 있는 특정 시점을 말하며 마운트, 업데이트, 언마운트 상태로 구성되어 있다. 컴포넌트가 실제 DOM에 삽입되는 것을 마운트, 컴포넌트가 변하는 것을 업데이트, 컴포넌트가 DOM 상에서 제거되는 것을 언마운트라고 한다. 특정 시점별 호출되는 생명주기 메소드에 대해 알아보자.

생명주기 메소드

React의 생명주기 메소드는 다음과 같은 것들이 있다.

  • constructor()State 데이터를 초기화 하는 메소드
  • render(): 클래스 컴포넌트에서 반드시 구현되어야 하는 메소드
  • componentDidMount(): 컴포넌트가 마운트 된 직후 호출되는 메소드
  • componentDidUpdate(): 업데이트가 진행된 직후에 호출되는 메소드
  • componentWillUnmount(): 컴포넌트가 마운트 해제되어 제거되기 직전에 호출되는 메소드
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')
);

React 공식문서

0개의 댓글