React Basic : Component Lifecycle

박철연·2022년 2월 4일
0

React Basic

목록 보기
7/11

오늘 글에서는 저번 시간에 간략하게 배웠던 컴포넌트의 생명 주기에 대해 알아보려고 합니다. 이걸 왜 알아야 하는지, 알고 나면 어떻게 써먹을 수 있는지 찬찬히 배워보겠습니다.

Component Lifecycle?

생명 주기(Lifecycle)라는 개념에 대해 들어보신 적 있나요? 저는 경영학과 출신이다 보니, 마케팅을 배우면서 제품의 생명 주기에 대해 배운 기억이 제일 먼저 떠 오릅니다. 그 외에도 다양한 분야에서 생명 주기는 자주 등장하는 개념입니다.

생명 주기는 어떠한 프로세스 내에서, 특정 타이밍에 특정 동작이 일어나는 지에 대해 설명하는 개념이라고 할 수 있습니다.

그런데 React에도 생명 주기가 있었으니...

바로 React의 핵심이라고 할 수 있는 컴포넌트가 생명 주기의 개념을 동반하고 있습니다.

컴포넌트도 탄생과 죽음을 경험합니다. 뚱딴지같은 소리일 수도 있지만, 실제로 그렇습니다.

보통 컴포넌트가 브라우저 내에 그려지는(렌더링되는) 순간을 탄생이라고 간주하고, 다시 브라우저에서 사라지는 순간을 죽음이라고 간주합니다.

즉, 컴포넌트의 생명 주기는 브라우저에 그려졌다가 다시 사라지는 그 사이의 과정을 한 단어로 나타낸 것입니다.

그리고 그 과정에서, 개발자가 더 많은 기능을 활용할 수 있도록 특정 생명 주기 메서드들이 지원됩니다.

컴포넌트가 렌더링 될 때, 사라질 때, 변경될 때 이러한 메서드들을 사용해서 특정 동작을 실행할 수 있는 식입니다.

생명 주기 메서드

들어가기에 앞서, 해당 내용은 아래 웹 페이지를 참고하시면 좋습니다.

메서드들을 소개하면서, 우리가 일반적으로 자주 다루는 메서드들 위주로 설명할 생각이기 때문에, 혹시 아래에서 언급되지 않은 메서드들에 대해 궁금하신 분들 역시 아래 링크에서 메서드들에 대한 내용을 찾아보시면 될 것 같습니다.

<주요 생명 주기 메서드>

https://ko.reactjs.org/docs/react-component.html

<컴포넌트 생명 주기 도식화>

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

컴포넌트가 마운트(Mount)될 때

마운트라는 것은 컴포넌트의 인스턴스가 생성되어서 DOM 구조 내에 삽입되는 것을 말합니다.

이 과정에서는 constructor / render / componentDidMount 의 순서로 호출이 이루어집니다.

먼저 constructor 함수는 컴포넌트가 실제로 마운트되기 전에 호출됩니다. constructor 함수는 class 컴포넌트를 만들 때 언급한 바 있습니다. 컴포넌트를 새로 만들 때 마다 호출되는 클래스 생성자 메서드라고 보시면 됩니다.

다음으로 render 함수는 컴포넌트가 새 화면을 그리게 되는 시점에 호출이 됩니다.

componentDidMount는 render 함수가 jsx를 전부 화면에 그리고 나면 호출됩니다. 이름이 직관적이죠?

따라서 컴포넌트가 화면에 다 그려진 이후에 실행하고자 하는 것들은 모두 componentDidMount 메서드로 동작시킬 수 있을 것입니다.

컴포넌트가 업데이트(Update)될 때

말 그대로 컴포넌트의 내용이 업데이트, 변경될 때 호출되는 메서드들입니다.

render / componentDidUpdate의 순서로 호출됩니다.

컴포넌트 업데이트는 사실 컴포넌트가 마운트 되는 과정과 거의 비슷합니다. 단, constructor 함수가 호출되지 않을 뿐입니다.

당연히 업데이트해야 하는 부분을 화면에서 변경하기 위해 render 함수가 먼저 호출될 것입니다.

화면에 컴포넌트가 다 그려져야 componentDidUpdate가 호출되기 때문에, 아까와 마찬가지로 컴포넌트 업데이트 직후 실행시킬 동작들은 이 메서드로 반영해줄 수 있겠습니다.

컴포넌트가 해제(Unmount)될 때

컴포넌트가 해제된다는 것은 쉽게 생각해서 컴포넌트가 제거될 때라고 보시면 되겠습니다.

이 과정에서 주의깊게 살펴 볼 만한 메서드는 하나, componentWillUnmount입니다.

componentWillUnMount도 이름이 참 직관적입니다. 이 메서드는 컴포넌트가 화면에서 소멸하기 직전 호출되는 함수입니다.

마치며

오늘 게시물에서는 컴포넌트의 생명 주기에 대해 알아 보았습니다. 다만 실제 코드를 작성하며 배운 것이 아니다 보니 아직 직접적으로 와 닿지는 않네요.

앞으로 자잘한 프로젝트를 하나씩 해보면서 생명 주기를 십분 활용하는 연습을 해보고 싶습니다.

제가 사전에 계획했던 React Basic의 이론적인 부분은 이렇게 마무리 되었습니다. 향후에는 Create-React-App을 통한 개발 환경 구축, React 심화, Redux 순으로 게시물을 올려볼 생각입니다.

혹시 부족하거나 틀린 부분은 언제든지 댓글로 알려주시면 감사하겠습니다!

profile
Frontend Developer

0개의 댓글