React 컴포넌트 생명주기

컴포넌트 생명주기

클래스 컴포넌트에서는 리액트 훅을 사용할 수 없기 때문에 useEffect()를 사용할 수 없다.

하지만 클래스 컴포넌트는 컴포넌트 생명 주기라는 개념이 존재한다.

예를 들어서, DOM에 렌더링되거나 DOM에서 삭제될 때 같은 경우이다.

추가할 수 있는 생명 주기 메소드는 componentDidMount(), componentDidUpdate(), componentWillUnmount() 등 이 있다.

좀 덜 중요한 생명 주기 메소드들도 있지만 3개의 메소드가 가장 보편적이고 가장 중요한 메소드이다.

render() 메소드와 같은 내장 함수로 리액트에서 임포트해온 내장 Component를 상속하면 바로 사용할 수 있다.

componentDidMount

componentDidMount()는 컴포넌트가 마운트되면 호출되며 컴포넌트가 평가되고 DOM에 렌더링될 때에 실행된다.

이는 useEffect()를 빈 의존성 배열로 사용하는 것과 같은 역할을 수행한다.

effect 함수는 컴포넌트가 처음 마운트될 때 실행되며 의존성이 없다면 딱 한 번만 실행되기때문이다.

componentDidMount() {
    this.setState({ Users: this.context.users });
  }

componentDidUpdate

componentDidUpdate()는 컴포넌트가 갱신되면 호출된다.

상태 같은 것이 변경되거나 하면 컴포넌트가 재평가, 재 렌더링될 때 호출된다.

이 것은 의존성 배열이 있는 useEffect와 동일하다.

컴포넌트가 재 렌더링되거나 의존성 배열이 변경되면 effect 역시 재실행되기때문이다.

componentDidUpdate(prevProps, prevState) {
    if (prevState.searchTerm !== this.state.searchTerm) {
      this.setState({
        filteredUsers: this.context.users.filter((user) =>
          user.name.includes(this.state.searchTerm)
        ),
      });
    }
  }

componentWillUnmount

componentWillUnmount()는 컴포넌트가 DOM에서 삭제되기 직전에 호출된다.

이 것은 useEffect()에 있는 cleanup 함수와 같다.

cleanup 함수는 effect 함수가 다시 실행되기 직전에 호출되며, 항상 컴포넌트가

DOM으로부터 삭제되기 전에 다시 호출되기때문이다.

  componentWillUnmount() {
    console.log('user will unmmount');
  }