1. 함수형 컴포넌트의 라이프사이클

함수형 컴포넌트에서의 라이프 사이클을 알아보도록 하겠습니다. 함수형 컴포넌트에서는 라이프 사이클 메서드를 직접적으로 사용하진 않습니다.

예전의 리액트에서는 Hook을 지원하지 않았기 때문에 함수형 컴포넌트에서 라이프 사이클 메서드를 사용하기 힘들었습니다.

16.8버전에서 발표된 Hook을 통해 class를 작성하지 않고 state와 같은 React의 기능들을 사용할 수 있게 되면서 함수형 컴포넌트를 훨씬 편하게 사용할 수 있게 해주었습니다.

아래 이미지는 앞서 배운 클래스 컴포넌트에서의 라이프 사이클입니다.

클래스 컴포넌트에서의 대략적인 라이프 사이클

함수형 컴포넌트 또한 페이지에 렌더링하기 위한 과정이 있을텐데요. 함수형 컴포넌트에서 훅이 동작하며 렌더링되는 과정을 Hook Flow라고 부르겠습니다.(공식 명칭이 아닙니다.)

1.1 Hook Flow

함수형 컴포넌트에서의 Hook 흐름(flow)에 대해서 살펴봅시다.

함수형 컴포넌트의 흐름 : React Hook Flow