React Lifecycle이란?
React는 컴포넌트 단위로 개발하는 라이브러리이기 때문에 각각의 컴포넌트들은 생명주기(Lifecycle)을 가지고 있다.
1. Mounting - 컴포넌트가 생성되어 브라우저상에 나타날 때
2. Updating - props, state가 변경되거나 부모 컴포넌트가 리렌더링 되는 등 업데이트 되었을 때
3. unMounting - 컴포넌트가 제거되어 브라우저상에서 사라질 때
생명주기 메서드는 컴포넌트가 생성될 때, 업데이트될 때, 제거될 때 호출되는 메서드이며 클래스형 컴포넌트에서만 사용할 수 있다. 함수형 컴포넌트에서는 Hook을 사용하여 생명주기 메서드와 비슷하게 구현할 수 있다.
출처 https://github.com/wojtekmaj/react-lifecycle-methods-diagram
생명주기 메서드
Mounting
1. constructor - 생성자 메서드로 컴포넌트가 생성되면 가장 먼저 실행되는 메서드
2. getDerivedStateFromProps - props로 받아온 것을 state에 동기화 시켜주는 메서드이며 컴포넌트가 첫 렌더링이 되기 전, 이후 리렌더링 되기 전에도 매번 실행된다.
3. render - 컴포넌트를 렌더링하는 메서드이며 컴포넌트가 생성 및 업데이트 될 때 호출된다.
4. componentDidMount - 컴포넌트가 첫 렌더링을 마치면 호출되는 메서드이며 컴포넌트가 화면에 나타난 상태이다. 주로 아래와 같은 작업이 진행된다.
- DOM을 사용하는 외부 라이브러리를 연동
- 해당 컴포넌트에서 fetch 및 axios를 통해 데이터를 요청
- DOM 속성을 읽거나 직접 조작
Updating
5. getDerivedStateFromProps - 컴포넌트의 props 및 state가 변경되었을 떄 호출되는 메서드
6. shouldComponentUpdate - 컴포넌트의 리렌더링 여부를 결정하는 메서드이며 주로 최적화할 때 사용되고 React.memo의 역할과 비슷하다.
3. render - 컴포넌트를 렌더링하는 메서드이며 컴포넌트가 생성 및 업데이트 될 때 호출된다.
7. getSnapshotBeforeUpdate - 컴포넌트의 변화를 DOM에 반영하기 직전에 호출되는 메서드
8. componentDidUpdate - 컴포넌트가 리렌더링되어 화면에 결과가 모두 반영된 후 호출되는 메서드
Unmounting
9. componentWillUnmount - 컴포넌트가 화면에서 사라지기 직전에 호출되는 메서드이며 주로 아래와 같은 작업이 진행된다.
- DOM에 등록했었던 이벤트를 제거
- setTimeout을 clearTimeout을 통해 제거
- 외부 라이브러리를 사용할 경우 dispose 기능이 있다면 이곳에서 호출
React Hooks
React Hooks는 React 16.8 버전에서 도입되었으며 함수형 컴포넌트에서 state와 생명주기 기능을 연동할 수 있게 해주는 함수이다. Hook은 class에서 동작하지 않고 class없이 React를 사용할 수 있게 해준다.
함수형 컴포넌트에서 state를 사용할 수 있도록 하는 useState와 useReducer가 있으며 생명 주기 메서드와 비슷한 기능을 하는 useEffect 등이 있다.
React Hook을 사용하는 이유
-
render props, 고차 컴포넌트와 같은 패턴은 코드의 추적이 어려워 재사용하기 힘들다.
-
constructor, this, binding 등 지켜야할 규칙이 많고 생명주기 메서드로 인해 코드가 길어지고 사용하기 어렵다.
-
프로젝트가 규모가 커질수록 생명주기 메서드는 관련 없는 로직이 빈번하게 섞이므로 잦은 버그 발생 및 무결성을 해치게 된다.
React Hook 규칙
-
최상위(at the Top Level)에서만 Hook을 호출해야 한다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 호출하면 안된다. 컴포넌트가 렌더링될 때마다 항상 동일한 순서로 호출되는 것이 보장되어야 하기 때문이다
-
React 함수 내에서만 Hook을 호출해야 한다. React 함수 컴포넌트 또는 Custom Hook에서만 호출해야 한다. 일반적인 JavaScript 함수에서 호출해서는 안된다.
React Hook 종류
- useState
- useReducer
- useContext
- useEffect
- useRef
- useMemo
- useCallback
