1. Lifecycle이란?
Lifecycle은 생명주기를 의미한다. 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이며 각각의 컴포넌트에는 생명주기가 존재한다.
컴포넌트의 생명주기는 생성(mount) → 수정(update) → 제거 (unmounting)순으로 진행된다. 생성은 처음으로 컴포넌트를 불러오는 단계이며 수정은 사용자의 행동으로 데이터가 바뀌거나, 부모 컴포넌트가 렌더링할 때 업데이트 되는 단계이며(props, state가 바뀔 때, 리렌더링 했을 때, 강제로 업데이트 했을 때) 마지막으로 제거는 페이지를 이동하거나 사용자의 행동으로 인해 컴포넌트가 화면에서 사라지는 단계이다.
요약 하자면 컴포넌트의 생명주기는 렌더링을 준비하는 순간부터 페이지에서 사라질 때까지이다.
2. Class component Lifecycle
클래스형 컨포넌트 라이프 사이클 도표
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
새로운 컴포넌트 생성
→ constructor(생성자 함수) 실행
→ render 실행, 이 때 컴포넌트의 모양을 정의 할 수 있으며 state나 props에 접근해서 데이터를 보여줄 수 있다.
→ mount(컴포넌트가 화면에 나타나는 것)이 완료 되면 componentDidMount가 실행된다. componentDidMount는 첫번째 렌더링을 마친 후에 딱 한번만 실행 된다.
조건부 수행
→ componentDidUpdate는 리렌더링이 완료한 후 실행
→ componentWillUnmount는 컴포넌트가 DOM에서 제거 될 때 실행
3. Functional component
함수형 컨포넌트 라이프 사이클 도표
https://wavez.github.io/react-hooks-lifecycle/
새로운 컴포넌트 생성
→ 함수형 컨포넌트 호출.
→ 함수형 컨포넌트 내부에서 실행.
→ return으로 화면에 렌더링.
조건부 수행
→ 변경 혹은 컴포넌트의 소멸 시 useEffect 실행
4. React hooks
리액트 훅이란 React 16.8 버전부터 추가된 기능으로 함수형 컨포넌트에서도 상태 값을 관리하거나 그 밖에 여러 React 기능을 사용할 수 있게 하기 위해 등장했다.
6. React hooks rules
리액트 훅을 사용할 때의 규칙은 다음과 같다.
- 훅은 오직 리액트 함수형 컴포넌트 내에서만 호출 가능하다.
- 훅은 최상위 레벨에서만 호출 가능하다.
- 반복문, 중첩문 내에서는 컴포넌트가 렌더링할 때의 훅의 실행 순서를 늘 동일하게 보장해 줄 수 없기 때문에 호출이 불가능하다.
리액트 훅의 규칙을 지킴으로서 컴포넌트가 여러번 렌더링이 되어도 훅의 실행 순서를 동일하게 보장해 줄 수 있으며 훅이 여러번 호출 되어도 상태를 올바르게 유지할 수 있게 해준다.
5. 참조
리액트를 다루는 기술(김민준)
스파르타 코딩클럽 리액트 심화반 2주차 강의자료
https://ko.reactjs.org/docs/getting-started.html
https://adjh54.tistory.com/43
