[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 31회차 미션 - 30강 LifeCycle 메서드

LifeCycle 메서드

이는 class형 컴포넌트안에서 사용하는 메서드이다. 함수형 컴포넌트의 useEffect랑 비슷한 역할이다. 이 메서드도 어차피 class형이기때문에 그렇게 깊게 알 필요는 없다. LifeCycle 메서드에는 아래와 주기를 갖는다.

함수들을 하나하나 알아보도록 하자.

constructor

컴포넌트가 가장 처음 만들어질때 호출되는 함수이다. 여기서는 this.state값을 설정, 메서드에 this를 바인딩 하는 작업들을 한다.

constructor(props){
    super(props); //
    console.log("constructor");
}

getDrivedStateFromProps

props로 받아온 어떠한 값을 state에 동기화 해주는 역할을 한다. 이 메서드 대신에 componentDidMount를 사용할 수 있기 때문이다.

static getDrivedStateFromProps(nextProps, prevState){ //다음 받아올props, 현재 컴포넌트의 상태
    console.log("getDrivedStateFromProps");
    if(nextProps.color !== prevState.color){
        return {color : nextProps.color};
    }
    return null;
}

render

화면에 그려지는 순간이 render. 위에서부터 순차적으로 진행된다.

render(){
    return <div>Hello World</div>
}

componentDidMount

render가 모두 완료된 후에 실행되는 것이 componentDidMount이다. 외부API호출, 특정DOM에 이벤트를 건다던지 하는 일을 이 단계에서 수행한다.

componentDidMount(){
    console.log('컴포넌트가 화면에서 보여지고 있습니다.")
}

업데이트시 사용하는 메서드

아까 위에서 살펴본 메서드들 중에서도 업데이트 시에는 souldComponentUpdate와 getSnapshotBeforeUpdate이 두가지가 추가된다. souldComponentUpdate는 최적화를 할때 사용하는 메서드이다. false를 반환하면 리렌더링 하지 않고 true를 반환할때만 리렌더링 한다. getSnapshotBeforeUpdate는 업데이트 되기 바로 직전의 위치를 기억하는 메서드이다. componentDidUpdate와 함께 쓰인다. 예를 들면 업데이트시 스크롤이 계속 추가되는 화면에서 업데이트 되기전의 스크롤 위치를 기억해야할 때 사용한다. 그리고 getSnapshotBeforeUpdate는 함수형컴포넌트에서는 사용할 수 없다. 잘 알아두도록 하자.

componentWillUnmount

컴포넌트가 사라지기 직전에 호출되는 메서드이다. 등록된 이벤트를 제거하거나 setTimeout을 해제하거나 할때 사용한다.

componentWillUnmount(){
    console.log('컴포넌트가 사라지기 직전!');
}

componentDidCatch

componentDidCatch도 함수형 컴포넌트에서는 구현할 수 없다. 이 함수는 우리가 미처 발견하지 못한 에러가 있을때 사용자에게 어떤 에러가 발생했는지의 위치와 화면상에서 에러라고 보여주는 역할을 한다.

class ErrorBoundary extends Component {
  state = {
    error: false,
  };
  componentDidCatch(error, info) {
    console.log("에러가 발생했습니다");
    console.log({
      error,
      info,
    });
    this.setState({
      error: true,
    });
  }
  render() {
    if (this.state.error) {
      return <h1>에러 발생!</h1>;
    }
    return this.props.children;
  }
}

에러가 발생하는 상황에서 실시간 모니터링이 가능한 서비스도 있다. Sentry라는 서비스다. 유료/무료 버전이 있는데 무료버전도 나쁘지 않다. 추후에 필요하면 이 강의를 참고해서 설치해보도록 하자. (30강의 32번 영상)

오늘은 여기까지..
시청 영상 30강 30~32까지

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/31Cf1hp