📋CS/기초질문

라이프사이클, 라이프사이클 메소드에 대해 설명해주세요.

하얀성 2024. 6. 18. 09:45
  • ⭐ 라이프사이클에 대해 설명해주세요.
  • ⭐ 라이프 사이클 메소드에 대해 설명해주세요.

 

라이프사이클에 대해 설명해주세요 

소프트웨어 개발에서는 라이프사이클 관리를 통해 컴포넌트의 생명주기 동안 발생하는 여러 이벤트에 대응할 수 있습니다. 라이프사이클의 각 단계에서 적절한 작업을 수행함으로써 컴포넌트가 효율적으로 동작하고, 필요 없는 리소스를 소비하지 않도록 합니다.

  1. 마운팅(Mounting): 이 단계에서는 컴포넌트가 생성되고, 초기 상태가 설정되며, 처음으로 화면에 렌더링됩니다.
  2. 업데이트(Updating): 상태나 속성이 변경되어 컴포넌트가 다시 렌더링될 때 발생합니다. 업데이트 과정에서는 변화된 데이터를 반영하여 화면을 다시 그립니다.
  3. 언마운팅(Unmounting): 컴포넌트가 더 이상 필요하지 않게 되어 DOM에서 제거될 때 발생합니다. 이 단계에서는 메모리 누수를 방지하기 위해 정리 작업이 수행됩니다.

라이프사이클 메소드에 대해 설명해주세요 

React 컴포넌트의 라이프사이클 메소드는 컴포넌트의 생명주기 동안 특정 시점에 호출되는 메소드로, 주로 클래스형 컴포넌트에서 사용됩니다. 이 메소드들을 통해 컴포넌트의 상태 변경, 외부 데이터 로딩, DOM 업데이트 등의 작업을 관리할 수 있습니다.

 

마운팅(Mounting) 단계 메소드

  1. constructor(props): 컴포넌트가 처음 생성될 때 호출되며, 초기 상태(state) 설정이나 이벤트 핸들러 바인딩 등에 사용됩니다.
    constructor(props) {
      super(props);
      this.state = { count: 0 };
    }

업데이트(Updating) 단계 메소드

   1.render(): 컴포넌트의 UI를 정의하는 메소드로, 상태나 속성이 변경될 때마다 호출됩니다.

render() {
  return <div>{this.state.value}</div>;
}

언마운팅(Unmounting) 단계 메소드 

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