리액트 생명주기(Lifecycle)에 대해서

State and Lifecycle – React

---

리액트 컴포넌트 생명주기는 컴포넌트가 생성되고 화면에 렌더링되어 업데이트되고 제거될 때까지의 일련의 과정을 의미합니다.

 

리액트 컴포넌트는 다음과 같은 세 가지 주요 생명주기 단계를 거칩니다.

 

1. 마운팅(Mounting): 컴포넌트 생성 및 렌더링

• constructor(): 컴포넌트가 생성될 때 호출됩니다. 초기 state 설정 및 메서드 바인딩에 사용됩니다.
• static getDerivedStateFromProps(): props에 따라 state를 업데이트할 때 사용됩니다.
• render(): 컴포넌트를 렌더링하는 메서드입니다. JSX를 반환합니다.
• componentDidMount(): 컴포넌트가 DOM에 삽입된 후 호출됩니다. 외부 API 호출, 이벤트 리스너 설정 등에 사용됩니다.

2. 업데이트(Updating): 컴포넌트 업데이트 및 재렌더링

• static getDerivedStateFromProps(): props에 따라 state를 업데이트할 때 사용됩니다.
• shouldComponentUpdate(): 컴포넌트가 업데이트되어야 하는지 여부를 결정합니다. 성능 최적화에 사용됩니다.
• render(): 컴포넌트를 렌더링하는 메서드입니다. JSX를 반환합니다.
• getSnapshotBeforeUpdate(): DOM 업데이트 직전에 호출됩니다. DOM 변경 전 정보를 캡처할 때 사용됩니다.
• componentDidUpdate(): 컴포넌트 업데이트 후 호출됩니다. DOM 업데이트 후 작업을 수행할 때 사용됩니다.

3. 언마운팅(Unmounting): 컴포넌트 제거

• componentWillUnmount(): 컴포넌트가 DOM에서 제거되기 직전에 호출됩니다. 이벤트 리스너 제거, 타이머 제거 등에 사용됩니다.

---

[ 함수형 컴포넌트와 Hooks ]

 

클래스형 컴포넌트 외에도 함수형 컴포넌트와 Hooks를 사용하여 리액트 컴포넌트를 만들 수 있습니다. 함수형 컴포넌트에서는 다음과 같은 Hooks를 사용하여 생명주기 관련 작업을 수행합니다.

• useEffect(): componentDidMount, componentDidUpdate, componentWillUnmount와 유사한 기능을 제공합니다.
• useState(): state를 관리합니다.
• useContext(): context를 사용합니다.
• useReducer(): 복잡한 state 관리를 위한 reducer를 사용합니다.
• useMemo(): 연산 결과를 메모이제이션하여 성능을 최적화합니다.
• useCallback(): 함수를 메모이제이션하여 성능을 최적화합니다.
• useRef(): DOM 요소 또는 컴포넌트 인스턴스에 접근합니다.

---

State: A Component's Memory – React

상태: 컴포넌트의 메모리 – React

Synchronizing with Effects – React

Synchronizing with Effects – React