도대체 Hook이 뭔데?

리액트를 공부하다보면 누구나 들어봤을 Hook
나도 수도 없이 썼지만 정작 Hook이 뭐냐고 물어본다면 깔끔하게 대답하지 못 했다🙁
그래서 오늘은 공식문서를 읽으며 톺아본 Hook에 대해 포스팅해보고자 한다.

Hook이란?

공식문서에는 Hook을 다음과 같이 설명하고 있습니다.

즉, 리액트 16.8버전부터 추가되었고 함수형 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)"할 수 있게 해주는 함수입니다.

그렇다면 Hook은 왜 도입되었을까요?

React에서 Hook을 도입한 이유?

1. 컴포넌트 사이에서 상태 로직을 재사용하기 어렵습니다.

• render props나 고차 컴포넌트 같은 패턴으로 해결 가능하나 이는 컴포넌트 재구성을 강요하고 코드 추적을 어렵게 합니다.
• Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있습니다.
  - 이를 이용해 독립적인 테스트와 재사용이 가능합니다.
  - Hook은 계층 변화없이 상태 관련 로직을 재사용할 수 있도록 도와줍니다.
  **

2. 복잡한 컴포넌트들은 이해하기 어렵습니다.**

• 생명주기 메서드에는 자주 관련없는 로직이 섞여들어갑니다.
  예를 들어 componentDidMount 와 componentDidUpdate는 컴포넌트 안에서 데이터를 가져오는 작업을 수행할 때 사용되어야 하지만, componentDidMount에는 이벤트 리스너를 설정하는 것 같은 관계 없는 로직이 포함되고 componentWillUnmount에서는 cleanup 로직을 수행하기도 합니다. 이로 인해 버그가 쉽게 발생하고 무결성을 너무나 쉽게 해칩니다.
  **

3. Class는 사용하기 어렵습니다.**
   Class 사용을 위해서는 JS의 this 키워드의 작동을 알아야합니다. 이 때, JS의 this는 다른 언어와 매우 다르게 작동함으로 개발자들에게 큰 혼란을 주었고, 코드의 재사용과 구성을 매우 어렵게 만들었습니다.
   이러한 문제를 해결하기 위해 Hook은 Class없이 React 기능을 사용하는 방법을 제시합니다.

React Hook의 개요

1. Hook은 하위 호환성을 가지고 있습니다.
2. Hook은 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수입니다.
3. Hook은 클래스 내에서 동작하지 않는다. 대신 클래스 없이 리액트를 사용할 수 있게 해줍니다.

Hook 사용 규칙

1.최상위에서만 Hook을 호출해야합니다.
- 반복문, 조건문, 중첩된 함수 내에서 Hook 실행 금지
2. React 함수 컴포넌트 내에서만 Hook을 호출할 수 있습니다.
- 일반 JS 함수안에서는 Hook을 호출하면 안 됨

Custom Hook

자신만의 Hook을 만들면 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있습니다.

1. 네이밍은 useSomthing으로 합니다. ex) useFriendState
2. ⭐️ 같은 Hook을 사용하는 두 개의 컴포넌트는 state를 공유하지 않습니다.
   • 사용자 정의 Hook을 상태 관련 로직을 재사용하는 매커니즘이지만 사용자 Hook을 사용할 때마다 그 안의 state와 effect는 완전히 독립적입니다.
   • 하나의 컴포넌트 안에서 useState와 useEffect를 여러 번 부를 수 있고, 이들은 매우 독립적인 것과 같습니다.

출처
Hook의 개요 - React