리액트 클래스 컴포넌트에서는 컴포넌트의 생명 주기

마운팅 (Mounting)

컴포넌트가 DOM에 삽입되는 단계입니다.

1. constructor(props):
   • 컴포넌트가 처음 생성될 때 호출됩니다. 상태를 초기화하거나 메서드를 바인딩하는 데 주로 사용됩니다.

   javascript코드 복사
   constructor(props) {
     super(props);
     this.state = { ... };
   }
   
   

2. static getDerivedStateFromProps(props, state):
   • 컴포넌트가 마운트되기 전에 호출되며, props로부터 상태를 갱신해야 할 필요가 있을 때 사용됩니다. 이 메서드는 정적 메서드여서 this에 접근할 수 없습니다.

   javascript코드 복사
   static getDerivedStateFromProps(nextProps, prevState) {
     if (nextProps.someValue !== prevState.someValue) {
       return { someValue: nextProps.someValue };
     }
     return null;
   }
   
   

3. render():
   • 필수 메서드로, 컴포넌트의 UI를 반환합니다. JSX를 반환하거나 null을 반환할 수 있습니다.

   javascript코드 복사
   render() {
     return <div>My Component</div>;
   }
   
   

4. componentDidMount():
   • 컴포넌트가 처음 렌더링된 후에 호출됩니다. DOM 노드가 준비된 후에 초기 데이터를 가져오거나 서브스크립션을 설정하는 데 주로 사용됩니다.

   javascript코드 복사
   componentDidMount() {
     // 데이터 가져오기 등의 작업
   }
   
   

업데이트 (Updating)

컴포넌트가 업데이트될 때 호출되는 메서드들입니다.

1. static getDerivedStateFromProps(props, state):
   • 이 메서드는 업데이트 단계에서도 호출됩니다. 컴포넌트가 새로운 props를 받았을 때 상태를 갱신해야 하는 경우에 사용됩니다.
2. shouldComponentUpdate(nextProps, nextState):
   • 리렌더링 여부를 결정합니다. 기본값은 true이며, false를 반환하면 업데이트를 막을 수 있습니다.

   javascript코드 복사
   shouldComponentUpdate(nextProps, nextState) {
     return nextProps.someValue !== this.props.someValue;
   }
   
   

3. render():
   • 업데이트 시에도 호출됩니다.
4. getSnapshotBeforeUpdate(prevProps, prevState):
   • DOM이 실제로 변경되기 전에 호출되며, 업데이트 이전의 상태를 캡처할 수 있습니다. 여기서 반환된 값은 componentDidUpdate로 전달됩니다.

   javascript코드 복사
   getSnapshotBeforeUpdate(prevProps, prevState) {
     return someSnapshotValue;
   }
   
   

5. componentDidUpdate(prevProps, prevState, snapshot):
   • 컴포넌트가 업데이트된 후에 호출됩니다. 여기서 세 번째 인자는 getSnapshotBeforeUpdate에서 반환된 값입니다.

   javascript코드 복사
   componentDidUpdate(prevProps, prevState, snapshot) {
     if (prevProps.someValue !== this.props.someValue) {
       // 업데이트 후 작업
     }
   }
   
   

언마운팅 (Unmounting)

컴포넌트가 DOM에서 제거되는 단계입니다.

1. componentWillUnmount():
   • 컴포넌트가 DOM에서 제거되기 직전에 호출됩니다. 타이머를 정리하거나 네트워크 요청을 취소하는 등의 작업을 수행할 수 있습니다.

   javascript코드 복사
   componentWillUnmount() {
     // 정리 작업
   }
   
   

오류 처리 (Error Handling)

컴포넌트 내에서 오류가 발생했을 때 호출됩니다.

1. static getDerivedStateFromError(error):
   • 컴포넌트에서 오류가 발생했을 때 상태를 갱신할 수 있습니다.

   javascript코드 복사
   static getDerivedStateFromError(error) {
     return { hasError: true };
   }
   
   

2. componentDidCatch(error, info):
   • 오류가 발생했을 때 호출되며, 오류 로그를 기록하거나 오류 처리를 수행할 수 있습니다.

   javascript코드 복사
   componentDidCatch(error, info) {
     // 오류 로깅 작업
   }
   
   

이러한 라이프사이클 메서드를 통해 컴포넌트의 생명 주기 동안 특정 작업을 수행할 수 있으며, 이를 통해 컴포넌트의 상태 관리, 성능 최적화, 오류 처리 등을 효율적으로 할 수 있습니다.