[React] React 함수형 컴포넌트의 생명주기에 대해 araboza.

안녕하세요! 오늘은 함수형 컴포넌트의 생명주기(life cycle)을 따라가며, 그들이 언제 태어나고(마운트), 성장하고(업데이트), 그리고 사라지는지(언마운트)에 대해 알아보겠습니다.

---

🚀 1. 컴포넌트의 탄생: 마운트 (Mounting)

컴포넌트가 처음으로 세상에 나와 웹 페이지(DOM)에 삽입되는 과정을 '마운트'라고 부릅니다. 마치 연극에서 배우가 무대에 처음 등장하는 순간과 같은데요.

• 어떤 일이 일어나나요?
  1. 초기 렌더링: React는 컴포넌트 함수를 호출하여 초기 state를 설정하고, props를 받아 첫 번째 UI(JSX)를 만듭니다.
  2. 화면 등장: React가 이 UI를 실제 웹 브라우저 화면에 그려 보여줍니다. 이제 사용자가 컴포넌트를 볼 수 있고 상호작용할 수 있게 됩니다.
  3. 초기 설정 필요: 컴포넌트가 화면에 나타난 직후, 딱 한 번만 필요한 초기 설정 작업들이 수행될 수 있습니다.
• 이 단계에서 주로 하는 일:
  • 초기 데이터 로딩: "페이지에 들어오면 게시물 목록을 한 번만 불러와줘!"와 같이, 컴포넌트가 처음 보일 때 필요한 데이터를 가져옵니다.
  • 초기 이벤트 설정: 특정 DOM 요소에 이벤트 리스너를 한 번만 붙이는 작업 등이 이루어집니다.
  • 외부 라이브러리 초기화: 지도 API나 차트 라이브러리처럼, 컴포넌트가 화면에 그려진 후에 한 번만 초기화되어야 하는 작업들이 있습니다.

반응형

🌱 2. 컴포넌트의 성장통: 업데이트 (Updating)

컴포넌트가 무대 위에서 연기를 계속하며 대사나 동작을 바꾸듯이, props나 state가 변경되어 컴포넌트의 UI가 다시 그려지는 과정을 '업데이트'라고 합니다.

• 어떤 일이 일어나나요?
  1. 변화 감지: useState의 setSomething() 함수를 호출하거나, 부모 컴포넌트로부터 새로운 props를 받으면 React는 컴포넌트의 변화를 감지합니다.
  2. 새로운 모습 준비 (함수 재실행): React는 변경된 props와 state를 가지고 컴포넌트 함수를 다시 호출합니다. 그러면 새로운 UI(JSX)가 만들어집니다.
  3. 최소한의 변경: React는 이전 UI와 새로운 UI를 비교하여, 실제 웹 페이지에서 바뀐 부분만 아주 효율적으로 업데이트합니다.
  4. 변화에 따른 반응: props나 state의 변화에 따라 어떤 추가적인 작업이 필요할 수 있습니다.
• 이 단계에서 주로 하는 일:
  • 데이터 재로딩: "검색창에 새로운 검색어를 입력하면, 그에 맞는 검색 결과를 다시 불러와줘!"와 같이, 특정 값의 변화에 따라 데이터를 다시 가져옵니다.
  • UI 동기화: "사용자가 창 크기를 조절하면, 그에 맞춰 UI 레이아웃을 다시 계산해줘!"와 같이, 외부 환경 변화에 따라 UI를 조정합니다.
  • 특정 값 변화에 따른 추가 작업: "카운트 숫자가 10을 넘으면 특별한 메시지를 보여줘!"처럼, 특정 상태 변화에 반응하여 부수적인 작업을 수행합니다.

 

🍂 3. 컴포넌트의 퇴장: 언마운트 (Unmounting)

컴포넌트가 더 이상 필요 없어져 웹 페이지에서 사라지는 과정을 '언마운트'라고 합니다. 배우가 연극을 마치고 무대에서 퇴장하는 것과 같습니다.

• 어떤 일이 일어나나요?
  1. 사라짐 결정: 라우터가 페이지를 변경하거나, 부모 컴포넌트에서 특정 컴포넌트를 더 이상 렌더링하지 않기로 결정하면, 해당 컴포넌트는 DOM에서 제거됩니다.
  2. 마지막 정리: 컴포넌트가 완전히 사라지기 직전, 마운트 또는 업데이트 단계에서 설정했던 자원들을 깨끗하게 마무리하는 작업이 필요합니다.
• 이 단계에서 주로 하는 일:
  • 메모리 누수 방지: 마운트나 업데이트 단계에서 설정했던 타이머(setInterval, setTimeout)를 해제합니다.
  • 이벤트 리스너 해제: DOM에 직접 붙였던 이벤트 리스너를 제거합니다.
  • 구독 취소: 외부 서비스(예: 실시간 채팅)에 대한 구독을 해제합니다.
  • 자원 반환: 웹소켓 연결이나 기타 외부 리소스를 닫습니다.

---

React 함수형 컴포넌트의 생애 주기를 이해하는 것은 컴포넌트가 어떻게 동작하고, 언제 데이터를 가져와야 하며, 언제 자원을 정리해야 하는지 파악하는 데 필수적입니다.

이 포스팅을 바탕으로 더욱 견고하고 효율적인 React 애플리케이션을 만들어 나가시는데 도움이 되면 좋겠습니다.

읽어주셔서 감사합니다!