[React] react life cycle (리액트 생명주기) 순서, 역할
생명주기 순서
1. 생명주기의 1단계 - 생성(Mounting)
컴포넌트의 state가 constructor에 의해 초기화되고, rendering과정을 거쳐 DOM에 최초로 그려지는 단계
▶생성단계의 흐름
1. 컴포넌트의 base state가 최초로 constructor에 의해서 초기화 된다.
2. 초기화가 완료되면 render() 메소드가 실행된다. render()는 JSX로 작성된 코드를 자바스크립트가 이해할 수 있도록 변환한 후 HTML 형태로 DOM에 그려질 수 있도록 돕는 역할을 한다.
(위 두개의 단계가 끝나면 리액트는 화면에 표시해야 하는 컴포넌트가 어떻게 생겼는지, 어떠한 데이터를 가지고 있는지 알게 된다.)
3. 이제 실제로 DOM에 컴포넌트를 최초로 표시한다.(mounting)
4. mounting이 완료되면 componentDidMount 메소드가 실행된다.
(즉 constructor -> render -> componentDidMount 순으로 실행)
모든 요소가 화면에 표시되면 이후 componentDidMount() 내부에서 API call 등을 통해 base state를 update시킬 수 있다. 최초에 데이터를 fetching하는 대신 모두 DOM에 그려진 후 맨 마지막에 fetching 하는 이유는 무엇일까?
data를 fetching하는 과정은 시간이 얼마나 소요될 지 모른다. 그렇기 때문에 fetching하기 전에 그려야 하는 모든 형태를 DOM에 우선 그려놓고 이후 mount가 완료되면(didMount) 이후 componentDidMount() 안에서 API call 등을 진행하는 것이다.
2. 생명주기의 2단계 - 업데이트(updating)
컴포넌트에 전달된 props 혹은 state에 변화가 생길 경우에는 updating 단계로 넘어간다. 변화가 생기면 리액트는 해당 컴포넌트를 re-mounting하는 것이 아니라 re-rendering을 진행한다. 변화가 필요한 HTML 조각만을 찾아내 그 부분만 update하는 것이다.
1. mount된 컴포넌트에 props가 변경되거나, setState()로 state가 update되거나 forceUpdate()가 발생한다.
2. 변화된 데이터를 기반으로 기존의 컴포넌트를 re-rendering한다.
3. rendering이 완료되면 DOM에 변화된 부분을 update해서 표시한다.
4. componentDidUpdate() 메소드가 실행된다.
3. 생명주기의 3단계 - 제거(unmounting)
DOM에 나타나있던 컴포넌트가 DOM에서 제거되어야 할 경우, componentWillUnmount() 메소드가 실행된다. DOM에서 사라진 컴포넌트가 다시 DOM에 그려질 경우에는 2단계가 아니라 1단계, 즉 Mount 단계(생성 단계)부터 다시 시작한다.
Functional Component 생명주기
리액트에서 Hook은 함수형 컴포넌트에서 react state와 생명주기 기능을 연동 할 수 있게 해주는 함수
리액트 훅을 도입한 목적
- 기존의 라이프 사이클 메소드 기반이 아닌 로직 기반으로 나눌 수 있어서 컴포넌트를 함수단위로 쪼갤 수 있음
- 라이트사이클 메소드에는 관련없는 로직이 자주 섞여 들어가는데, 이로 인해 버그가 쉽게 발생하고 무결성을 쉽게 해침
Hook 사용 규칙 두가지
- 최상위에서만 Hook을 호출해야함 - 반복문, 조건문, 중첩된 함수 내에서 실행 X
- 리액트 함수 컴포넌트에서만 Hook을 호출해야함 - 일반 JS에서는 호출X