[React] React Hook(훅) 사용 규칙

📌 React Hook(훅) 사용 규칙

 

✅ Hook은 최상위 레벨에서만 호출해야 한다.

• Hook은 항상 React 함수의 최상위 레벨에서 호출하고, return 이전에 사용해야 한다. 
• Hook은 React가 함수 컴포넌트를 렌더링하는 동안에만 호출할 수 있다.
• return문, 반복문, 조건문, 이벤트 핸들러, 중첩 함수, try/catch/finally 블록 내부에서 호출 ❌

function Counter() {
  // 함수 컴포넌트의 최상위 레벨에서 사용
  const [count, setCount] = useState(0);
  // ...
}

function useWindowWidth() {
  // 커스텀 Hook의 최상위 레벨에서 사용
  const [width, setWidth] = useState(window.innerWidth);
  // ...
}

 

 

 

✅ Hook은 React 함수에서만 호출해야 한다. 

• JavaScript 함수에서 Hook을 호출하면 안된다❌
• Hook은 React 함수 컴포넌트, 커스텀 Hook에서 호출해야 한다.

// ✅ 리액트 컴포넌트
function FriendList() {
  const [onlineStatus, setOnlineStatus] = useOnlineStatus(); 
}

// ❌ JavaScript 함수
function setOnlineStatus() { 
  const [onlineStatus, setOnlineStatus] = useOnlineStatus();
}

 

 

---

 

Hook의 규칙 – React