Hooks의 규칙

📌 리액트 함수

• 리액트 컴포넌트를 생성하기 위해 사용되는 함수
• 이 함수는 JSX(JavaScript XML)를 반환하여 리액트 애플리케이션의 UI를 정의하고 렌더링하는 역할
• 리액트 함수는 주로 두 가지 형태 => 함수 컴포넌트, 클래스 컴포넌트

 

📌 리액트 컴포넌트

• 리액트 컴포넌트는 JSX를 반환한다.
• JSX는 React.createElement 호출로 변환되며, 이것이 리액트 컴포넌트의 템플릿이다.
• 함수 컴포넌트나 클래스 컴포넌트 내에서 JSX를 반환하면 해당 함수나 클래스는 리액트 컴포넌트로 간주된다.

 

📌 리액트 훅의 규칙

1. 리액트 훅은 최상위 수준에서 호출되어야 한다.
   • 함수 컴포넌트나 클래스 컴포넌트의 최상위 수준에서만 호출되어야 한다. 중첩 함수(useEffect 등), 블록 스코프(조건문, 루프 등) 안에서 호출할 수 없다.
2. 리액트 훅은 컴포넌트 범위에서만 사용해야 한다.
   • = 리액트 컴포넌트 외부에서 훅을 호출할 수 없다.
   • 함수 컴포넌트에서 훅 호출 가능
   • 클래스 컴포넌트에서 훅을 사용할 때에는 일부 제약이 있다.
     특히 라이프사이클 메서드와의 통합 등에 제한이 있다.
     클래스 컴포넌트에서 훅을 사용하려면 react@16.8.0 버전 이상이 필요
   • 사용자 정의 컴포넌트에서 훅 호출 가능
3. 일관된 훅 호출 순서를 유지해야 한다.
   • 훅은 내부적으로 호출 순서를 기억해두었다가 리렌더링 시마다 동일한 순서로 작동하도록 설계되어있기 때문에 이 순서를 유지해야 한다.
   • 훅의 호출 순서를 일관되게 유지함으로써 리액트는 컴포넌트의 상태를 올바르게 추적하고 각 훅의 의도를 파악할 수 있다. 훅이 어떤 순서로 호출되느냐에 따라 훅이 내부적으로 관리하는 상태들이 어떤 방식으로 동작하는지가 결정된다.
   • 훅의 호출 순서가 일관되지 않으면 상태 간의 의존성이 깨지고, 예상치 못한 동작이 발생할 수 있다.
4. 커스텀 훅의 이름 규칙
   • 커스텀 훅을 만들었다면, 해당 훅의 이름은 use로 시작해야 합니다. ex) useCustomHook

 

 

🔥Reducer 함수는 객체를 반환하기 때문에 리액트 컴포넌트가 아니다.

• Reducer 함수는 주로 Redux에서 상태 관리를 위해 사용되며, 객체를 반환하여 새로운 상태를 결정한다.

🔥🔥따라서 Reducer 함수 안에서는 리액트 훅을 사용할 수 없다.

• Reducer 함수는 일반적으로 리액트 컴포넌트가 아닌, Redux의 일부이다.
• Reducer 함수는 보통 Redux에서 사용되며, Redux는 별도의 상태 관리 라이브러리이다. 그래서 Reducer 함수 내에서 리액트 훅을 직접 사용하는 것은 권장하지 않는다.