LifeCycle이란?

LifeCycle이란?

• 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트 수명주기가 존재, 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 과정에서 시작하여 페이지에서 사라질때 끝이난다.
  1. 생성(componentDidMount)
     • mount, 컴포넌트가 생성 되어서 돔에 올라갈때
     • 리렌더링 할때는 실행되지 않고, 처음에 1회만 실행
     • ajax / addeventlistner 등이 여기서 한다
     • 돔 관련 처리를 할 수 있다.
     • DOM이 생성되고 웹 브라우저 상에서 나타나는 것을 뜻한다.
  2. 수정(componentDidUpdate)
     • state의 값이 업데이트가되면 렌더를 다시 한다.
     • 리렌더링이 끝난 다음 호출
     • props, state 바뀔때 발생한다.
     • 부모 컴포넌트가 리렌더링 될 때
     • this.forceUpdate로 강제로 렌더링을 트리거할 때
  3.삭제(componentWillUnmount)
  • 화면에서 완전히 사라지기 직전에 호출된다
  • DOM에서 제거되는 것을 뜻한다.

함수에서 클래스로 변환하기

다섯 단계로 Clock과 같은 함수 컴포넌트를 클래스로 변환할 수 있습니다.

1. React.Component를 확장하는 동일한 이름의 ES6 class를 생성합니다.
2. render()라고 불리는 빈 메서드를 추가합니다.
3. 함수의 내용을 render() 메서드 안으로 옮깁니다.
4. render() 내용 안에 있는 props를 this.props로 변경합니다.
5. 남아있는 빈 함수 선언을 삭제합니다.

Clock은 이제 함수가 아닌 클래스로 정의됩니다.

render 메서드는 업데이트가 발생할 때마다 호출되지만, 같은 DOM 노드로 을 렌더링하는 경우 Clock 클래스의 단일 인스턴스만 사용됩니다. 이것은 로컬 state와 생명주기 메서드와 같은 부가적인 기능을 사용할 수 있게 해줍니다.

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

생명주기 메서드를 클래스에 추가하기

• 많은 컴포넌트가 있는 애플리케이션에서 컴포넌트가 삭제될 때 해당 컴포넌트가 사용 중이던 리소스를 확보하는 것이 중요합니다.
• Clock이 처음 DOM에 렌더링 될 때마다 타이머를 설정하려고 합니다. 이것은 React에서 "마운팅"이라고 합니다.
• 또한 Clock에 의해 생성된 DOM이 삭제될 때마다 타이머를 해제하려고 합니다. 이것은 React에서 "언마운팅"이라고 합니다.
• 컴포넌트 클래스에서 특별한 메서드를 선언하여 컴포넌트가 마운트되거나 언마운트 될 때 일부 코드를 작동할 수 있습니다.

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

  componentDidMount() {
  }

  componentWillUnmount() {
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

• 이러한 메서드들은 "생명주기 메서드"라고 불립니다.
• componentDidMount()메서드는 컴포넌트 출력물이 DOM이 렌더링 된 후에 싱행됩니다. 이 장소가 타이머를 설정하기에 좋은 장소입니다.

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

• this (this.timerID)에서 어떻게 타이머 ID를 제대로 저장해주는지 주의해주세요.
• this.props가 React에 의해 스스로 설정되고 this.state가 특수한 의미가 있지만, 타이머 ID와 같이 데이터 흐름 안에 포함되지 않는 어떤 항목을 보관할 필요가 있다면 자유롭게 클래스에 수동으로 부가적인 필드를 추가해도 됩니다.
• componentWillUnmount() 생명주기 메서드 안에 있는 타이머를 분해해 보겠습니다.

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

• 마지막으로 Clock 컴포넌트가 매초 작동하도록 하는 tick()이라는 메서드를 구현해 보겠습니다.
• 이것은 컴포넌트 로컬 state를 업데이트하기 위해 this.setState()를 사용합니다.

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>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Clock />);