React.js LifeCycle

리액트 라이프사이클이란?

리액트 라이프사이클은 마치 사람의 인생처럼 컴포넌트가 태어나고(생성), 성장하며(업데이트), 그리고 사라지는(제거) 과정을 의미합니다 . 

이 과정을 이해하면 컴포넌트가 언제 어떻게 동작하는지 파악하고 효율적으로 코드를 작성할 수 있습니다.

 

---

리액트 라이프사이클의 3단계

리액트 컴포넌트의 라이프사이클은 크게 세 가지 단계로 나눌 수 있습니다:

 

---

1. 마운트(Mount) - 컴포넌트의 탄생

컴포넌트가 처음 DOM에 삽입될 때 실행되는 단계입니다.

constructor(): 

컴포넌트가 생성될 때 가장 먼저 호출되는 메서드로, 초기 state를 설정합니다

render(): 

화면에 컴포넌트를 그려주는 메서드입니다 

componentDidMount(): 

컴포넌트가 화면에 완전히 렌더링된 직후 호출됩니다. 

이 시점에서는 DOM에 접근할 수 있어 AJAX 요청이나 타이머 설정 같은 작업을 주로 수행합니다 

---

2. 업데이트(Update) - 컴포넌트의 성장

컴포넌트의 props나 state가 변경될 때 실행되는 단계입니다.

getDerivedStateFromProps(): 

props의 변화에 따라 state를 업데이트할 때 사용됩니다

shouldComponentUpdate(): 

컴포넌트를 다시 렌더링할지 결정하는 메서드로, 성능 최적화에 사용됩니다 

render(): 

변경된 내용을 화면에 그려줍니다

getSnapshotBeforeUpdate(): 

실제 DOM 업데이트 직전에 호출되어 DOM 정보를 미리 가져올 수 있습니다

 

componentDidUpdate(): 

컴포넌트 업데이트 완료 후 호출됩니다

---

3. 언마운트(Unmount) - 컴포넌트의 소멸

컴포넌트가 DOM에서 제거될 때 실행되는 단계입니다.

componentWillUnmount(): 

컴포넌트가 제거되기 직전에 호출됩니다. 타이머 해제, 네트워크 요청 취소 등의 정리 작업을 수행합니다 

 

 

---

실제 동작 예시

예를 들어, 시계 컴포넌트를 생각해보세요:

 

---

시계 컴포넌트가 처음 생성될 때 constructor에서 초기 시간을 설정합니다

---

render 메서드를 통해 화면에 시계를 그립니다

---

componentDidMount에서 매 초마다 시간을 업데이트하는 타이머를 설정합니다

---

시간이 변경될 때마다 state가 업데이트되고 화면이 다시 렌더링됩니다

---

시계 컴포넌트가 화면에서 사라질 때 componentWillUnmount에서 타이머를 해제합니다 

---

이렇게 라이프사이클 메서드를 활용하면 컴포넌트의 생성부터 소멸까지 전체 과정을 효과적으로 관리할 수 있습니다.

함수형 컴포넌트에서는 이러한 라이프사이클 메서드 대신 Hook(특히 useEffect)을 사용하여 비슷한 기능을 구현합니다.

 

 

 

 

end