[React] Hook이란?

✨❗️ 리액트 공식 문서 - Hook의 개요

 

Hook은 React 버전 16.8부터 새로 추가된 것으로 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 게하는 요소이다.

 

 

✅  Hook이 뭔가요?

👉 Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)" 할 수 있게 해주는 함수입니다.
- React 공식 문서

 

✅ 왜 등장했을까?

Class component
- state, 라이프 사이클 때문에 사용
- 클래스로 부터 한번 인스턴스가 생성이 되고 나면 독립적으로 움직일 수 있음
- this.state가 참조하는 값은 항상 최신 ⇒ 결과를 보장하기 힘듬(버그 발생)
- 반면 함수는 한번 호출되고 메모리 상에서 사라짐 ⇒ state, 라이프 사이클 불가능

기존의 Class 문제점 (Class)

1. 컴포넌트 사이에서 상태 로직을 재사용하기 어려웠음
   
   • React는 컴포넌트간에 재사용 가능한 로직을 붙이는 방법을 제공하지 않음. 
   • 컴포넌트의 재구성을 강요하며, 코드의 추적을 어렵게 만듦
   • React 개발자 도구에서 React 애플리케이션을 본다면 “래퍼 지옥(wrapper hell)“이 나옴
   • → Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와줌
     Custom Hook은 이들 둘과는 달리 컴포넌트 트리에 새 컴포넌트를 추가하지 않고도 이것을 가능하게 해줌
     
     

     

2. 복잡한 컴포넌트들은 이해하기 어려움
   • 각 생명주기 메서드에는 자주 관련 없는 로직이 섞여들어가는 경우가 발생 
     이로 인해 버그가 쉽게 발생하고 무결성을 쉽게 해침
   • →  Hook을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있다.
     또한 이러한 로직의 추적을 쉽게 할 수 있도록 reducer를 활용해 컴포넌트의 지역 상태 값을 관리하도록 할 수 있다

   • componentDidMount() {
       applyFirstLogic()
       applySecondLogic()
     }

   • // 관심사의 분리 - Data fetching
     useEffect(() => {
       applyFirstLogic()
     }, [])
     
     // 관심사의 분리 - Attach event listener
     useEffect(() => {
       applySecondLogic()
     }, [])

3. Class은 사람과 기계를 혼동시킵니다.
   • Class에서의 this 
     JavaScript의 this키워드는 대부분의 다른 언어에서와는 다르게 작동함으로 사용자에게 큰 혼란을 주었으며, 코드의 재사용성과 구성을 매우 어렵게 만듦
     또한 class의 사용을 위해 이벤트 핸들러가 등록되는 방법을 정확히 파악해야 했으며, 코드를 매우 장황하게 만듦.
   • 사용자들은 props, state, 그리고 top-down 데이터 흐름을 완벽하게 하고도, Class의 이해에는 어려움을 겪어왔음
     React 내의 함수와 Class 컴포넌트의 구별, 각 요소의 사용 타이밍 등은 숙련된 React 개발자 사이에서도 의견이 일치하지 않는문제...
   • Class는 코드의 최소화를 힘들게 만들고, 핫 리로딩을 깨지기 쉽고 신뢰할 수 없게 만들었음. 
     우리는 코드가 최적화 가능한 경로에서 유지될 가능성이 더 높은 API를 제공하고 싶음!
   • → Hook은 Class없이 React 기능들을 사용하는 방법을 제시합니다. 
     개념적으로 React 컴포넌트는 항상 함수에 더 가깝습니다. 
     Hook은 class 안에서는 동작하지 않습니다. 

 

 

💡 그럼에도 "React로부터 Class를 제거할 계획은 없습니다." - 공식문서

 

 

 

---

 

 

✅  Hook 사용 규칙

• 최상위(at the top level)에서만 Hook을 호출
  반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 말 것.
  •  React가 여러 Hook들을 구분할 수 있는 유일한 정보는 Hook이 사용된 순서 뿐이기 때문.

 

• React 함수 컴포넌트 내에서만 Hook을 호출
  일반 JavaScript 함수에서는 Hook을 호출해서는 안 됨. 
  • React 함수 컴포넌트에서 Hook을 호출 ⭕️
  • Custom Hook에서 Hook을 호출 ⭕️