[react] 리액트 컴포넌트 라이프사이클
Hello. #{Somebody}
React Component Life Cycle
리액트를 처음 접하면 이 "라이프사이클 메서드"라는 단어가 참 낯설고 어려워 보입니다.
그런데 쉽게 생각해보면 리액트 컴포넌트가 '언제 생성되고', '언제 업데이트되며', '언제 사라지는지'를 자연스럽게 설명해주는 개념입니다.
컴포넌트에도 삶이 있습니다
리액트의 컴포넌트는 단순한 UI 조각이 아니라, 생명을 가진 존재처럼 동작합니다. 생성되고, 변화하고, 사라집니다. 이 흐름 속에서 리액트는 우리에게 특정 시점에 코드를 실행할 수 있는 기회를 줍니다. 그 기회들이 바로 라이프사이클 메서드입니다.
크게 세 단계로 나눌 수 있습니다:
- 마운트(Mount): 컴포넌트가 화면에 나타나는 순간
- 업데이트(Update): 상태나 props가 바뀌어 다시 렌더링되는 순간
- 언마운트(Unmount): 컴포넌트가 화면에서 사라지는 순간
이제 각 단계에서 어떤 일들이 일어나는지 천천히 살펴보겠습니다.
마운트 단계 – 컴포넌트가 처음으로 태어납니다
컴포넌트가 처음 화면에 등장할 때 실행되는 메서드들이 있습니다. 이때 우리는 초기 데이터를 불러오거나, 이벤트 리스너를 설정하는 작업을 할 수 있습니다.
- constructor(): 컴포넌트가 태어나자마자 가장 먼저 호출됩니다. 초기 state를 설정하거나 메서드를 바인딩할 때 사용됩니다.
- render(): 화면에 어떤 UI를 보여줄지 결정하는 메서드입니다. 필수로 작성해야 합니다.
- componentDidMount(): 컴포넌트가 화면에 실제로 나타난 직후 실행됩니다. DOM 접근이나 API 호출 등 비동기 작업에 주로 사용됩니다.
이 마운트 단계에서 가장 많이 사용하는 건 componentDidMount입니다. 서버에서 데이터를 불러오는 경우, 이곳이 제격입니다.
업데이트 단계 – 변화는 언제나 찾아옵니다
컴포넌트는 props나 state가 바뀌면 다시 렌더링됩니다. 이 과정에서도 여러 메서드들이 실행됩니다.
- shouldComponentUpdate(): 렌더링을 할지 말지 결정하는 메서드입니다. 성능 최적화에 사용됩니다.
- render(): 다시 한번 호출됩니다. UI를 새로 그립니다.
- componentDidUpdate(): 업데이트가 끝난 후 실행됩니다. 이전 props나 state를 비교해 후속 작업을 진행할 수 있습니다.
이 단계에서는 렌더링 최적화를 고려하는 경우 shouldComponentUpdate가 유용하고, 실제로 DOM이 바뀐 이후의 작업은 componentDidUpdate에 맡기는 것이 좋습니다.
언마운트 단계 – 이제 떠날 시간입니다
컴포넌트가 더 이상 필요 없을 때, 리액트는 이를 제거합니다. 이때 정리(clean-up) 작업을 해주는 메서드가 있습니다.
- componentWillUnmount(): 컴포넌트가 제거되기 직전에 호출됩니다. 이벤트 리스너 제거, 타이머 해제 등 리소스를 정리할 때 사용됩니다.
이 메서드를 제대로 써야 메모리 누수나 이상 동작을 막을 수 있습니다. 특히 외부 라이브러리를 사용하는 경우 꼭 필요한 부분입니다.
라이프사이클 메서드 한눈에 보기
지금까지 설명한 메서드들을 아래 표로 정리해 보겠습니다. 어느 타이밍에 어떤 메서드가 호출되는지 빠르게 확인하실 수 있습니다.
| 마운트 | constructor() | 초기 state 설정, 메서드 바인딩 |
| render() | JSX 반환, UI 구성 | |
| componentDidMount() | 컴포넌트가 나타난 후 실행, API 호출 등 | |
| 업데이트 | shouldComponentUpdate() | 렌더링 여부 결정 |
| render() | 변경된 UI 렌더링 | |
| componentDidUpdate() | 업데이트 완료 후 실행, 후속 작업 | |
| 언마운트 | componentWillUnmount() | 컴포넌트 제거 직전, 정리 작업 |
함수형 컴포넌트에서는 어떻게 할까요?
요즘은 클래스형 컴포넌트보다 함수형 컴포넌트를 더 많이 사용합니다. 이 경우에는 useEffect라는 훅(Hook)을 통해 라이프사이클을 흉내 냅니다.
예를 들어,
- 마운트 시: useEffect(() => { ... }, [])
- 업데이트 시: useEffect(() => { ... }, [변수])
- 언마운트 시: useEffect(() => { return () => { 정리작업 }; }, [])
이처럼 useEffect 하나로 여러 단계의 라이프사이클을 처리할 수 있습니다. 실제로는 더 유연하지만 처음에는 조금 헷갈릴 수 있습니다.
리액트의 라이프사이클은 어렵게 느껴질 수 있지만, 사실은 매우 자연스러운 흐름입니다.
태어나고, 변화하고, 떠나는 그 순간마다 우리가 개입할 수 있는 지점을 만들어주는 것이죠.
처음엔 메서드 이름이 낯설고, 언제 어떤 걸 써야 할지 헷갈릴 수 있습니다. 하지만 위의 표와 흐름을 기억해두면, 실제 개발을 하면서 ‘아, 이 타이밍에 뭔가 해줘야겠구나’ 하는 감이 생깁니다.
함수형 컴포넌트를 쓰든, 클래스형 컴포넌트를 쓰든 결국 중요한 건 흐름을 이해하는 것입니다.
이 흐름을 잘 익혀두면, 어떤 복잡한 UI도 자연스럽게 다룰 수 있습니다.
그럼 즐거운 개발 되세요!🚀😉
Bye. #{Somebody}