-
React에서 컴포넌트는 라이프사이클이 존재한다
- 일반적으로 페이지에 렌더링되기 전 준비과정에서 시작하여 페이지에서 언마운트 될 때에 끝이 난다
- React의 라이프사이클 메소드는 class형 컴포넌트에서만 사용 할 수 있다
- React의 함수형 컴포넌트에서 라이프사이클 기능을 사용하기 위해 도입된 것이 Hook 기능이다
-
React의 Class에서의 라이프사이클 메소드는 크게 분류하면 생성 될 때, 업데이트 될 때, 제거 될 때로 나눌 수 있다
- constructor는 컴포넌트를 생성할 때에 실행되고, state를 정할 수 있다
- render는 컴포넌트를 렌더링할 때 사용되는 메소드이다
- componentDidMount는 컴포넌트를 생성하고 첫 렌더링 이후 실행된다
- componentDidUpdate는 업데이트 후 리렌더링이 완료되면 실행된다
- componentWillUnmount는 컴포넌트를 DOM에서 제거할 때에 실행된다
- componentDidCatch는 컴포넌트 렌더링 도중 에러가 발생했을 때 애플리케이션이 정지하지 않고 오류 UI를 보여줄 수 있게 해주는 메소드이다
- getDerivedStateFromProps는 props로 받아 온 값을 state에 전달할 때에 사용하고, 생성될 때와 업데이트 될 때 호출된다
- shouldComponentUpdate는 props나 state를 변경했을 때에 boolean 타입을 반환하여 리렌더링 여부를 결정하는 메소드이다, 최적화를 위한 용도로만 사용되도록 권장된다
- getSnapshotBeforeUpdate는 현재 state 또는 props의 변화가 컴포넌트 출력에 영향을 미치는지를 boolean값으로 판단하고, 변화가 없을 시에는 리렌더링을 방지하는 용도로 사용된다, 최적화를 위한 용도로만 사용되도록 권장된다
-
React의 함수형 컴포넌트의 state와 라이프사이클 기능을 연동하기 위해 Hook기능이 존재한다
- 기존의 메서드 기반이 아닌, 로직 기반으로 나누어 컴포넌트를 함수 단위로 잘게 쪼갤수 있다
- Hook은 최상위에서만 호출되어야 하고, 반복문,조건문,중첩함수 내에서 실행되어선 안된다
- 컴포넌트가 랜더링될 때마다 동일한 순서로 Hook이 호출될 수 있다
- 또한 리액트 함수 컴포넌트에서만 호출되어야 한다(일반 JS에서는 불가)
- useState, useEffect, useContext, useReducer, useRef, useMemo, useCallback등이 있다
- 참조: 링크텍스트
