본문 바로가기

042. React - 라이프사이클

codeConnection 2024. 5. 23.

개념

리액트의 컴포넌트도 마치 인간처럼 생애주기(life cycle)을 갖는다. 탄생-변화-사망의 단계이다.

리액트 컴포넌트의 경우, Mount - Update - Unmount로 표현한다.

Mount (탄생)

  • 컴포넌트가 탄생하는 순간
  • 화면에 처음 렌더링 되는 순간

Update (변화)

  • 컴포넌트가 다시 재 렌더링 되는 순간
  • 재 렌더링 될 때를 의미

Unmount (죽음)

  • 컴포넌트가 화면에서 사라지는 순간
  • 렌더링에서 제외될 때를 의미

컴포넌트의 라이프사이클을 관리해야 하는 이유

성능을 최적화 하며 웹을 개발할 수 있다.

예를 들어 Mount 될 때 서버에서 API를 받아올 수 있고, 컴포넌트가 Update 될 때 어떤 값이 변경되었는지 콘솔에 찍어보며 관리할 수 있고, 컴포넌트가 Unmount 될 때 컴포넌트가 사용하던 메모리를 정리할 수 있다.

그리고 리액트에서 컴포넌트의 라이프사이클은 useEffect라는 훅을 이용하면 쉽게 관리할 수 있다.

댓글