라이프 사이클 (Life Cycle)
라이프 사이클은 “생애 주기”를 의미하는 단어로, 이는 인간의 탄생부터 죽음까지의 과정을 단계별로 나눈 것을 말합니다.
React의 컴포넌트도 인간과 유사한 라이프 사이클을 가지며, Mount, Update, Unmount라는 세 가지 단계로 구분됩니다.
Mount
컴포넌트가 처음으로 탄생한 순간, 즉 컴포넌트가 화면에 처음으로 렌더링 되는 순간을 의미합니다. 그래서 "A 컴포넌트가 Mount 되었다." 라고 표현하면 이제부터는 "A 컴포넌트가 화면에 처음으로 렌더링 되었다." 라는 뜻으로 이해하면 됩니다.
Update
Update는 Mount 이후에 컴포넌트가 다시 렌더링 되는 순간을 의미합니다. 즉, 컴포넌트가 리렌더링 되는 그 순간을 말하는 것입니다. 그래서 "A 컴포넌트가 Update 되었다." 라는 말은 곧 "A 컴포넌트가 리렌더링 되었다." 라는 뜻으로 이해하면 됩니다.
UnMount
UnMount는 컴포넌트가 화면에서 사라지는 순간을 의미합니다. 렌더링에서 제외되는 순간입니다. 그해서 "A 컴포넌트가 UnMount 되었다." 라는 말은 곧 "A 컴포넌트가 화면에서 사라졌다." 라는 뜻으로 이해하면 됩니다.
정리
컴포넌트의 라이프 사이클을 잘 이해하면, 원하는 타이밍에 컴포넌트가 특정 작업을 수행하도록 만들 수 있습니다.
예를 들어
- 컴포넌트가 처음 화면에 나타날 때, 즉 Mount 단계에서 백엔드 서버로 네트워크 요청을 보내 데이터를 불러오는 기능을 구현할 수 있습니다.
- 컴포넌트가 Update 되었을 때, 변경된 값을 콘솔에 출력하는 기능을 추가할 수 있습니다.
- 컴포넌트가 화면에서 사라질 때, 즉 Unmount 단계에서 컴포넌트가 사용하던 메모리나 리소스를 정리하도록 설정할 수 있습니다.
이처럼 컴포넌트의 라이프 사이클을 활용하면 다양한 상황에 맞는 동작을 구현할 수 있습니다.
라이프사이클 제어
컴포넌트 라이프 사이클의 단계별로 컴포넌트가 각기 다른 작업을 수행하도록 만드는 것을 라이프 사이클 제어라고 합니다. React에서는 useEffect Hook을 사용하여 이러한 라이프 사이클 제어를 간편하게 구현할 수 있습니다.
출처
강의명 : [2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 사이트 : [2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
