이번 WIL의 키워드 :
라이프사이클(클래스형 vs 함수형), React Hooks
React LifeCycle
React에서 컴포넌트는 여러 종류의 생명주기 메서드를 가지며 이 메서드를
오버라이딩(상속하여 재정의) 하여 특정 시점에 코드가 실행 되도록 설정한다.
리액트 라이플 사이클은 크게 Mount, Update, Unmount 3가지로 나뉜다.
클래스 컴포넌트에만 해당되는 내용이며,
함수형 컴포넌트는 Hook을 사용해 생명주기에 원하는 동작을 한다.
Mount (마운트)
DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트라고 한다.
이때 호출하는 라이플 사이클 메서드는 다음과 같다.
- constructor: 컴포넌트를 만들 때 마다 호출되는 클래스 생성자 메서드
- getDerivedStateFromProps: props에 있는 값을 state에 넣을 때 사용하는 메서드
- render: UI를 렌더링하는 메서드
- componentDidMount: 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드
Update (업데이트)
컴포넌트는 총 네 가지 경우에 업데이트 된다.
컴포넌트를 업데이트 할 때 다음 메서드를 호출한다.
- props가 바뀔 때
- state가 바뀔 때
- 부모 컴포넌트가 리렌더링 될 때
- this.forceUpdate로 강제로 렌더링을 트리거할 때
Unmount (언마운트)
마운트의 반대 과정으로 컴포넌트를 DOM에서 제거하는 것을 의미한다.
더는 컴포넌트를 사용하지 않을 때 발생하는 이벤트가 있다.
- componentWillUnmount: DOM에서 컴포넌트가 제거되기 직전에 호출된다.
정리하기 위한 코드를 이 메서드에 추가할 수 있다. 예를 들어 타이머를 제거하거나,
DOM 요소를 정리하거나, componentDidMount()에서 연결한 이벤트를 제거할 수 있다.
React Hooks의 useEffect()
Hook이란?
Hook은 함수 컴포넌트에서 React State와 생명주기 기능(Lifecycle Features)을
'연동(Hook Into)'할 수 있게 해주는 함수다. 클래스에서는 동작하지 않고
함수형 컴포넌트 내부에서 클래스없이 React를 사용할 수 있게 해준다.
과거에 컴포넌트 상태 관리 및 라이플 사이클 제어를 위해 클래스형 컴포넌트를 주로 사용했지만,
2019년 v16.8 부터 리액트 훅(Hook)이란 기능이 도입되면서 리액트 공식 문서에서는
함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있다.
대표적으로 상태 관리를 할 수 있는 useState(),
렌더링 직후 작업을 설정하는 useEffect() 등의 기능을 제공한다.
Hook의 사용규칙
Hook은 그냥 JavaScript 함수이지만, 두 가지 규칙을 준수해야 한다.
- 최상위(At The Top Level)에서만 Hook을 호출해야 한다.
반복문, 조건문, 중첩된 함수 내부에서 Hook을 실행하면 안된다. - React 함수 컴포넌트 내부에서만 Hook을 호출해야 한다.
일반 JavaScript 함수에서는 Hook을 호출해서는 안된다.
(직접 작성한 Custom Hook 내부에서는 호출이 가능하다.)
참고
공식문서 : Hook의 개요
리액트 라이프사이클의 이해
React Lifecycle 과 useEffect()
