TIL79-14 면접준비16: 리액트 컴포넌트의 라이프사이클

리액트 컴포넌트의 라이프사이클

• React 컴포넌트 라이프사이클은 마운팅, 업데이트, 언마운팅 세 가지 단계로 구성됩니다. 마운팅 단계에서 컴포넌트가 생성되고 DOM에 추가됩니다. 업데이트 중에는 컴포넌트가 자신의 props 또는 state가 변경될 때 다시 렌더링됩니다. 언마운팅 단계는 컴포넌트가 DOM에서 제거될 때 발생합니다.

심화

• React 구성 요소는 존재하는 동안 구성 요소 수명 주기라고 하는 일련의 단계를 거칩니다. 이러한 단계는 마운트, 업데이트 및 마운트 해제의 세 가지 주요 범주로 나눌 수 있습니다.

1. 마운팅: 이것은 React 구성 요소의 수명 주기에서 첫 번째 단계이며 구성 요소가 DOM에 처음 렌더링될 때 발생합니다. 이 단계에서 다음 메서드가 순서대로 호출됩니다.

   • constructor(): 컴포넌트가 처음 생성될 때 호출되는 메소드입니다. 상태를 초기화하고 메서드를 바인딩하는 데 사용됩니다.
   • 정적 getDerivedStateFromProps(): 이 메서드는 렌더링 직전에 호출되며 구성 요소가 소품의 변경 사항에 따라 내부 상태를 업데이트할 수 있도록 합니다.
   • render(): 이 메서드는 DOM에 렌더링될 JSX를 반환합니다.
   • componentDidMount(): 컴포넌트가 DOM에 마운트된 후 호출되는 메소드입니다. 이벤트 리스너를 설정하거나 서버에서 데이터를 가져오는 데 자주 사용됩니다.

2. 업데이트: 이 단계는 구성 요소의 props 또는 상태가 변경될 때 발생하며 구성 요소를 다시 렌더링해야 합니다. 이 단계에서 다음 메서드가 순서대로 호출됩니다.

   • static getDerivedStateFromProps(): 이 메서드는 props의 변경 사항에 따라 구성 요소의 상태를 업데이트하기 위해 다시 호출됩니다.
   • shouldComponentUpdate(): 이 메서드를 사용하면 구성 요소가 다시 렌더링해야 하는지 여부를 결정할 수 있습니다. false를 반환하면 구성 요소는 이 단계에서 나머지 수명 주기 메서드를 건너뜁니다.
   • render(): 이 메서드는 DOM에 렌더링될 업데이트된 JSX를 반환합니다.
   • getSnapshotBeforeUpdate(): 이 메서드는 업데이트된 JSX가 DOM에 렌더링되기 직전에 호출됩니다. 구성 요소가 변경되기 전에 DOM에 대한 일부 정보를 캡처할 수 있습니다.
   • componentDidUpdate(): 이 메서드는 업데이트된 JSX가 DOM에 렌더링된 후 호출됩니다. DOM의 변경 사항에 따라 구성 요소의 상태를 업데이트하는 데 자주 사용됩니다.

3. 마운트 해제: 이 단계는 컴포넌트가 DOM에서 제거될 때 발생합니다. 이 단계에서 다음 메서드가 호출됩니다.

   • componentWillUnmount(): 컴포넌트가 DOM에서 제거되기 직전에 호출되는 메소드입니다. 구성 요소가 만들었을 수 있는 이벤트 수신기 또는 기타 리소스를 정리하는 데 자주 사용됩니다.