컴포넌트의 마운트, 업데이트, 언마운트 단계 이해

React 컴포넌트의 생명주기는 컴포넌트가 생성되고 사라질 때까지의 단계를 의미합니다. 이러한 생명주기는 세 가지 주요 단계로 나뉩니다: 마운트(Mount), 업데이트(Update), 언마운트(Unmount)입니다.

1. 마운트 (Mounting):

a. constructor() 메소드:

• 컴포넌트가 생성될 때 호출되는 첫 번째 메소드입니다. 초기 상태를 설정하거나 메소드를 바인딩할 때 사용됩니다.

b. static getDerivedStateFromProps(props, state):

• Props로부터 상태를 동기화하는 메소드입니다. 컴포넌트가 마운트될 때와 업데이트될 때 모두 호출됩니다.

c. render() 메소드:

• 컴포넌트의 UI를 렌더링하는 메소드입니다. JSX를 반환합니다.

d. componentDidMount():

• 컴포넌트가 실제 DOM에 추가된 후에 호출됩니다. 초기 데이터를 가져오거나 외부 라이브러리를 초기화하는 등의 작업에 사용됩니다.

2. 업데이트 (Updating):

a. static getDerivedStateFromProps(props, state):

• 마운트와 마찬가지로 업데이트 시에도 호출됩니다.

b. shouldComponentUpdate(nextProps, nextState):

• 컴포넌트가 리렌더링을 해야 할지 결정하는 메소드입니다. 성능 최적화를 위해 사용됩니다.

c. render() 메소드:

• 컴포넌트의 UI를 업데이트하는 메소드입니다.

d. getSnapshotBeforeUpdate(prevProps, prevState):

• 최근에 렌더링된 결과가 실제 DOM에 반영되기 직전에 호출됩니다. 주로 스크롤 위치나 컴포넌트 내부 상태를 저장하는 데 사용됩니다.

e. componentDidUpdate(prevProps, prevState, snapshot):

• 컴포넌트가 업데이트를 완료한 후에 호출됩니다. 이전 상태와 현재 상태를 비교하거나 외부 라이브러리와의 통합 등에 사용됩니다.

3. 언마운트 (Unmounting):

a. componentWillUnmount():

• 컴포넌트가 언마운트되기 직전에 호출됩니다. 리소스 정리나 타이머 해제 등의 작업에 사용됩니다.

생명주기 메소드는 클래스형 컴포넌트에서 사용되며, 함수형 컴포넌트에서는 useEffect 훅을 통해 비슷한 작업을 수행할 수 있습니다. React Hooks를 사용하면 함수형 컴포넌트에서도 컴포넌트 생명주기를 다룰 수 있습니다.