LifeCycle Method

LifeCycle Method(생명주기 메서드)는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라질 때 호출되는 메서드들을 의미한다. 컴포넌트에서 에러가 발생했을 때 호출되는 메서드도 존재한다.
생명주기 메서드는 클래스형 컴포넌트에서만 사용할 수 있다.

출처: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Mount(생성될 때)

• constructor: 컴포넌트 생섯ㅇ자 메서드, 컴포넌트가 생성되면 가장 먼저 실행된다. this.props,this.state에 접근이 가능하며 리액트 요소를 반환한다.
• getDerivedStateFromProps: props로부터 파생된 state를 가져온다. 즉, props로 받아온 것을 state에 넣어준다.
• render: 컴포넌트를 렌더링한다.
• componentDidMount: 컴포넌트가 마운트됨, 즉 컴포넌트의 첫번째 렌더링이 끝나면 호출되는 메서드이다.
  이 메서드가 호출되는 시점에는 화면에 컴포넌트가 나타난 상태이다.

Updating(업데이트할 때)

• getDerivedStateFromProps: 컴포넌트의 props나 state가 바뀌었을 때도 이 메서드가 호출된다.
• shouldComponentUpdate: 컴포넌트가 리렌더링을 할지 말지 결정하는 메서드이다.
• componentDidUpdate: 컴포넌트가 업데이트 되고 난 후 발생한다.

Unmount(제거할 때)

• componentWillUnmount: 컴포넌트가 화면에서 사라지기 직전에 호출된다. 주로 DOM에 직접 등록했었던 이벤트를 제거하고, 만약에 setTimeOut을 걸은 것이 있다면 clearTimeout을 통하여 제거한다.

---

React Hooks

리액트에서 Hook은 함수형 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수이다. Hook은 class 안에서는 동작하지 않고, class없이 React를 사용할 수 있게 한다.

리액트 훅을 도입한 목적

• 기존의 LifeCycle Method 기반이 아닌 로직 기반으로 나눌 수 있어서 컴포넌트를 함수 단위로 잘게 쪼갤 수 있다.
• LifeCycle Method에는 관련 없는 로직이 자주 섞여 들어가는데, 이로 인해 버그가 쉽게 발생하고, 무결성을 쉽게 해친다.

Hook 사용 규칙

• 최상위에서만 Hook을 호출해야 한다.
  - 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안 된다.
  - 이 규칙을 따르면 컴포넌트가 렌더링될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장된다.
• 리액트 함수 컴포넌트에서만 Hook을 호출해야한다.
  - 일반 JS함수에서는 Hook을 호출해서는 안된다.