[React] 클래스형 컴포넌트의 생명 주기 메서드

1. 클래스형 컴포넌트의 생명 주기 메서드

• 모든 컴포넌트는 1) 초기화 단계 2) 업데이트 단계 3) 소멸 단계를 거친다.

• 

• 초기화 단계 : 최초 컴포넌트 객체가 생성될 때

• 업데이트 단계 : 컴포넌트의 속성값 또는 상태값이 변경될 때

1.1 Constructor 메서드

class MyCompoent extends React.Component { 
	constructor(props) { 
    	super(props) 
        this.state = { currentMovie: props.age < 10 ? '뽀로로' : '어벤저스', } 
    } 
}

• 초기 속성값으로부터 상태값을 만드는 경우
• super함수를 호출하지 않으면 컴포넌트가 제대로 동작하지 않는다.
• 상태값을 직접 할당하는 것은 constructor 메서드에서만 허용된다.

 

constructor 메서드에서는 setState 메서드를 호출하지 말자

• setState 메서드 호출은 컴포넌트가 마운트된 이후에만 유효하므로, 호출 시 무시된다.

1.2 getDerivedStateFromProps 메서드

class MyComponent extends React.Component { 
	state = { prevSpeed: this.props.speed, imMovingFaster: false, } 
    
    static getDerivedStateFromProps(props, state){ 
    	if (props.speed !== state.prevSpeed){ 
        	return { 
            	isMovingFaster: state.prevSpeed < props.speed, 
                prevSpeed: props.speed, 
             } 
         } 
         return null 
     } 
}

• 이전 속성값과 이후 속성값 모두에 의존적인 상태값이 필요할 때
• 주로 애니메이션과 같은 속성값으로 상태값을 계산할 때 유용하게 쓰인다.

잘못 사용하는 경우

• 속성값 변화에 따른 API 호출 ⇒ ComponentDidUpdate
• 속성값을 입력으로 하는 메모이제이션 ⇒ render 내에서 loadash 패키지 사용
• 속성값 변경 시 상태값 초기화 지양

1.3 render 메서드

• 무조건 작성해야 하는 메서드
• 화면에 보여질 내용을 결정하며 속성값 & 상태값만으로 결정되어야 한다.
• 부수 효과(서버 통신, 쿠키에 저장 등)가 필요하다면 다른 생명 주기 메서드에서 하면 된다.

1.4 ComponentDidMount 메서드

• render 메서드의 반환값이 실제 돔에 반영된 직후 호출된다.
• API호출을 통해 데이터를 가져올 때 (setState 메서드가 마운트 이후에만 동작하기 때문)

1.5 shouldCompoenentUpdate 메서드

• 반환값이 true인 경우 : render 메서드가 호출
• 반환값이 false인 경우 : 업데이트 단계가 멈춘다.

class MyComponent extends React.Component{ 
	shouldComponentUpdate(nextProps, nextState) { 
    	const { price } = this.state; 
        return price !== nextState.price; 
     } 
}

• 성능 최적화를 위한 메서드, But 성능 이슈가 발생했을 떄 작성해도 늦지 않다.

1.6 getSnapshotBeforeUpdate 메서드

• 이전 돔 요소의 상태값을 가져올 때
• getSnapshoptBeforeUpdate가 반환한 값은 componentDidUpdate 메서드의 세 번째 인자로 들어간다.

1.7 componentDidUpdate 메서드

componentDidUpdate(prevProps, prevState, snapshot)

• 업데이트 단계에서 마지막으로 호출됨
• ex) 사용자가 변경되었을 때 친구 목록 API 다시 호출
• useEffect 훅을 사용하면 됨

1.8 componentWillUnmount 메서드

• 소멸 단계에서 호출되는 유일한 생명 주기 메서드
• 타이머 해제, 구독 해제 등의 처리

1.9 getDerivedStateFromError, componentDidCatch 메서드

getDerivedStateFromError

• 렌더 단계에서 호출된다
• 에러 정보를 상태값에 저장해서 화면에 나타내는 용도

componentDidCatch

• 커밋 단계에서 호출된다
• 에러 정보를 서버로 전송하는 용도