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

사람의 인생처럼 리액트 컴포넌트도 태어나고 사라지는 생애주기가 있습니다. 이를 다른 말로 라이프 사이클이라고 합니다.

 

리액트 컴포넌트의 라이프 사이클은 크게 3단계로 구분합니다. 다음 그림은 리액트 컴포넌트의 3단계 라이프 사이클을 도식화한 것입니다.

 

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

 

리액트 컴포넌트의 라이프 사이클은 크게 마운트(Mount, 탄생), 업데이트(Update, 갱신), 언마운트(Unmount, 사망) 로 구분합니다.

 

• 마운트(Mount): 컴포넌트를 페이지에 처음 렌더링할 때
• 업데이트(Update): State 나 Props 의 값이 바뀌거나 부모 컴포넌트가 리렌더해 자신도 리렌더될 때
• 언마운트(Unmount): 더 이상 페이지에 컴포넌트를 렌더링하지 않을 때

 

라이프 사이클을 이용하면 컴포넌트가 처음 렌더링할 때 특정 동작을 하도록 만들거나, 업데이트할 때 적절한지 검사하거나, 페이지에서 사라질 때 메모리를 정리하는 등 여러 유용한 작업을 단계에 맞게 할 수 있습니다.

 

이를 라이프 사이클 제어(Lifecycle Control) 라고 합니다. 리액트 훅의 하나인 함수 useEffect 를 이용하면 이 사이클을 쉽게 제어할 수 있습니다.