React 라이프사이클과 Hooks

삽질 저장소·2022년 8월 7일
0

React컴포넌트의 라이프사이클

React의 생애주기는 크게 3가지로 볼 수 있다.
  1. 생성 (Mount) 화면에 나타나는 것
  2. 수정 (Update) 수정, 리랜더
  3. 제거 (Unmount) 화면에서 사라짐

과거 자주 사용되었던 클래스형 컴포넌트에서는 각 생애주기마다 사용할 수 있는 메서드를 가지고 있다.

클래스형 컴포넌트에서는 componentDidMount(생성), componentDidUpdate(수정), componentWillUnmount(제거) 메서드를 통해 각각의 생애주기에 맞는 기능을 수행해왔다.

현재 자주 사용하는 함수형 컴포넌트에서는 useEffect와 같은 'ReactHooks'를 사용하여 생애주기를 관리한다.

ReactHooks

함수형 컴포넌트에서도 클래스형 컴포넌트에서 사용하는 기능을 쓸 수 있도록 만든 기능.

기존의 클래스형 컴포넌트가 가지는 코드길이 문제, 가독성 문제, 중복코드 문제 등을 해결하기위해 등장했다. 상태 관리를 담당하는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 hook이 있다.

0개의 댓글