한 입 크기로 잘라먹는 리액트Table Of Contents
사람의 인생처럼 리액트 컴포넌트도 태어나고 사라지는 생애주기가 있습니다. 이를 다른 말로 라이프 사이클이라고 합니다.
리액트 컴포넌트의 라이프 사이클은 크게 3단계로 구분합니다. 다음 그림은 리액트 컴포넌트의 3단계 라이프 사이클을 도식화한 것입니다.
리액트 컴포넌트의 라이프 사이클은 크게 마운트(Mount, 탄생), 업데이트 (Update, 갱신), 언마운트(Unmount, 사망)로 구분합니다.
- 마운트(Mount): 컴포넌트를 페이지에 처음 렌더링할 때
- 업데이트(Update): State나 Props의 값이 바뀌거나 부모 컴포넌트가 리렌더해 자신도 리렌더될 때
- 언마운트(Unmount): 더 이상 페이지에 컴포넌트를 렌더링하지 않을 때
라이프 사이클을 이용하면 컴포넌트가 처음 렌더링할 때 특정 동작을 하도록 만들거나, 업데이트할 때 적절한지 검사하거나, 페이지에서 사라질 때 메모리를 정리 하는 등 여러 유용한 작업을 단계에 맞게 할 수 있습니다.
이를 라이프 사이클 제어 (Lifecylcle Control)라고 합니다. 리액트 훅의 하나인 함수 useEffect를 이용하면 이 사이클을 쉽게 제어할 수 있습니다.