Hooks란?

한마디로 Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능입니다.

• React 16.8 버전 (2019년도) 에 추가된 공식 라이브러리
• 클래스형 컴포넌트에서만 쓸 수 있었던 state와 life cycle을 함수형 컴포넌트에서도 사용 가능

Hook이 필요한 이유

hook을 사용해 함수형 컴포넌트에서도 state와 life cycle를 다룰 수 있기에 클래스형 컴포넌트에서만 가능하던 상태관리를 더 손쉽게 할 수 있기 때문

함수형 컴포넌트들은 리렌더링이 될때, 함수 안에 작성된 모든 코드가 다시 실행됩니다.
이로 인해서 함수형 컴포넌트들은 기존에 가지고 있던 상태(state)를 전혀 기억할 수 없게 됩니다.
이는 함수내에 써져 있는 모든 코드 및 변수를 기억할 수 없다는 의미입니다.

반면에 Hook은 브라우저에 메모리를 할당 함으로써, 함수형 컴포넌트가 상태(state)를 가질 수 있게 해줍니다.
공식홈페이지에 따르면 Hook을 만든 이유는 다음과 같습니다.

• 컴포넌트 사이에서 상태 로직 재사용이 어렵다
• 복잡한 (클래스형) 컴포넌트들은 이해하기 어렵다 (각종 생명주기 함수들)
• 클래스자체 개념을 이해하기 어렵다

그러나 Hook은 브라우저의 메모리 자원을 사용하기에 함부로 남발하면 오히려 성능저하를 불러올 수 있습니다.

Hook 사용 규칙

1. 최상위에서만 Hook을 호출한다.

• React 함수(컴포넌트)의 최상위에서만 Hook을 호출한다.
• 반복문, 조건문, 중첩된 함수등에서 호출 X

2. React 함수에서만 Hook을 호출한다.

• Custom Hook에서는 호출 가능하다.
• 일반적인 Javascript 함수에서는 호출 X

3. Hook은 호출되는 순서대로 동작된다.

• 한 컴포넌트에서 여러개의 hook이 사용되는 경우 hook은 위에서부터 아래로 순서에 맞게 동작한다.

Hook 종류

1. useState

컴포넌트의 state(상태)를 관리 할 수 있게 해줍니다.

2. useEffect

렌더링 이후에 실행할 코드를 만들수 있습니다.
어떤 변수가 변경될때마다 특정기능이 작동하도록 할 수 있습니다.

3. useContext

부모 컴포넌트와 자식 컴포넌트간의 props를 전역적으로 선언하고 관리할 수 있게 해줍니다.

4. useReducer

state 업데이트 로직을, reducer 함수에 따로 분리 할 수 있습니다.

5. useRef

컴포넌트나 HTML 요소를 래퍼런스로 관리할 수 있게 해줍니다.

6. useMemo, useCallback

특정 배열에 적힌 값이 변할 때만 값,함수를 다시 정의할 수 있다. (재랜더링시 정의 안함)