[코드잇 풀스택 1기] - React life cycle

React 생명주기

https://ko.legacy.reactjs.org/docs/react-component.html#the-component-lifecycle

리액트 컴포넌트가 생성, 업데이트, 소멸되는 일련의 과정을 말합니다.

리액트 컴포넌트는 크게 세 가지 단계로 구분됩니다.

마운팅, 업데이트, 언마운팅

각 단계에서 특정한 메서드가 호출됩니다. 

 

1.마운팅

마운팅 단계는 컴포넌트가 처음 DOM에 삽입될 때 발생합니다. 이 단계에서 호출되는 주요 메서드가 존재합니다.

 

- constructor() : 컴포넌트가 생성될 때 호출되며, state를 초기화하고 메서드를 바인딩하는 데 사용됩니다.

 

- static getDerivedStateFromProps(props, state) : props에서 state를 파생할 때 사용되며, 컴포넌트가 마운트 되기 전과 업데이트 될 때 호출됩니다.

 

- render() : 필수 메서드로, jsx를 반환하여 화면에 그릴 UI를 정의합니다.

 

- componentDidMount(): 컴ㅍ넌트가 마운트된 직후에 호출되며, DOM 조작이나 네트워크 요청 등을 수행하는 데 사용됩니다.

 

2. 업데이트

업데이트 단계는 컴포넌트의 props또는 state가 변경되어 다시 렌더링될 때 발생합니다. 이 단계에서 호출되는 중요 메서드가 존재합니다.

 

- static getDerivedStateFromProps(props, state): 마운팅 단계와 동일하게, props에서 state를 파생할 때 사용됩니다.

 

- shouldComponentUpdate(nextProps, nextState): 새로운 props나 state를 받았을 때, 컴포넌트가 업데이트될지 여부를 결정합니다. 성능 최적화를 위해 사용됩니다.

 

- render(): 마운팅 단계와 동일하게, UI를 다시 렌더링합니다.

 

- getSnapshotBeforeUpdate(prevProps, prevState): DOM이 업데이트되기 직전에 호출되며, 업데이트 이전의 DOM 상태를 참고할 때 사용됩니다.

 

- componentDidUpdate(prevProps, prevState, snapshot): 컴포넌트가 업데이트된 직후에 호출되며, DOM 조작이나 네트워크 요청 등을 수행하는 데 사용됩니다.

 

3. 언마운팅

언마운팅 단계는 컴포넌트가 DOM에서 제거될 때 발생합니다. 이 단계에서 호출되는 중요 메서드가 존재합니다.

 

함수형 컴포넌트와 훅

- useState: 컴포넌트의 상태를 관리합니다.

- useEffect: 사이드 이펙트를 수행하며, 클래스형 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount를 대체합니다.

- useContext: 컨텍스트를 사용합니다.

- useReducer: 복잡한 상태 로직을 관리합니다.

- useCallback, useMemo: 성능 최적화를 위해 사용됩니다.