React에서 컴포넌트는 "생명주기 메소드를 가지며 이 메소드를 오버라이딩(상속하여 재정의) 해서 특정시점에 코드가 실행되도록 설정할 수 있다.

클래스컴포넌트에만 해당되며, 함수형 컴포넌트에선 Hook을 사용하여 이와 같은 역할을 하게끔 한다.

클래스형 컴포넌트

  • 1) componentDidMount(랜더링되기 전)
    시점 : 브라우저 상에 나타날 때 가장 처음 실해되는 함수
    사용이유 :
    생성자 메서드로 this.state의 초기값 설정, 인스턴스에 이벤트 처리 메서드를 바인딩하기 위해 사용한다.
    --------super(props)를 첫 줄에 필수로 사용한다.

  • 2) componentDidUpdate(state의 변화가 있을 때, 리랜더링 해야하는경우)
    시점 : props 또는 state가 새로운 값으로 갱신되어 렌더링이 발생하기 직전에 호출
    사용이유 : 성능최적화를 위해 사용한다. 컴포넌트가 리렌더링을 할지 말지 결정하는 메소드이다. (함수형 컴포넌트에선 useMemo()가 같은 역할을 한다.)
  • 3) componentDidUnmount(컴포넌트가 꺼지기 직전)
    시점 : 컴포넌트가 브라우저상에서 사라질때
    사용이유 : 주로 DOM에 직접 등록했었던 이벤트를 제거하거나
    setTimeout이 있다면 타이머를 제거, 외부 라이브러리 인스턴스를 제거하기 위해 사용
profile
생각은 나중에..

0개의 댓글