Hook of React

리액트 컴포넌트는 함수형과 클래스형으로 나뉜다.

리액트 초기에는 일반적으로 함수형 컴포넌트를 사용하였으나 값의 상태를
관리 혹은 Life Cycle Method 즉 생명 주기를 사용하여야 할 때에만
클래스형 컴포넌트를 사용하였다.

함수형 컴포넌트가 사용된 이유는 아래와 같은 클래스형 컴포넌트의
대표적인 단점 때문이었다.
클래스형 컴포넌트의 단점은 다음과 같다.

1. 코드의 구성이 어렵고 컴포넌트의 재사용성이 떨어진다.
2. 컴파일 단계에서 코드 최적화를 어렵게 한다.
3. 최신 기술의 적용이 효과적이지 않다.

이러한 클래스형 컴포넌트의 단점을 보완하여 함수형 컴포넌트를 사용할 수 있도록 등장한 것이 바로 React Hook이다.

React Hook이란?

함수형 컴포넌트에서 사용되는 몇가지 기술들로 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 한다.

React Hook's Rule

1. 반복문, 조건문 혹은 중첩된 함수 내에서 호출하면 안 되며
   반드시 최상위에서만 훅을 호출해야 한다.
   또한 훅은 랜더링 시 항상 동일한 순서로 호출되어야 한다.

2. 훅은 리액트 함수 내에서만 호출해야 한다. 즉, 리액트 훅은 함수형 컴포넌트에서 호출해야 하며 추가적으로 custom hooks에서 또한
   호출이 가능하다.

그렇다면 다음은 리액트 훅의 예에 대해 알아보겠다.

대표적인 REACT HOOK

1. useState

useState는 컴포넌트에서 상태값을 추가할 때 사용되며 클래스형 컴포넌트에서만
사용 가능하던 State를 함수형 컴포넌트에서도 사용 가능하도록 한 대표적인 기능이다.

2. useEffect

화면이 렌더링될 때마다 특정 작업을 실행할 수 있도록 하는 훅이다.
이를 통해 함수형 컴포넌트의 생명 주기에 사용되는 최초 렌더링과
렌더링 후 업데이트를 합친 형태로 페이지가 렌더링될 때 변화된 값으로 인해 바뀌어야 할 화면의 데이터를 처리해준다.

3. useReducer

useReducer은 이 전 상태와 Action을 결합하여 새로운 상태값을 만든다. 일반적으로 리액트에서 상태관리를 위해 사용하는 훅은 useState지만
좀 더 복잡한 상태 관리가 필요한 경우 reducer을 사용할 수 있다.