[React] Ep1. Hook API

안녕하세요. 모리스입니다.😃

React Native 앱을 개발하면서 예전에 학습했던 React Hook에 대해서 다시 정리해 볼까 해요.

 

저는 지금은 iOS Native를 개발하고 있지만 실무에서 처음 개발을 접한 건 RN이였어요.

Native를 하면서 느끼는 거지만 React는 정말 정말 정말 잘 만든 프레임워크라는게 뼈저리게 느껴지네요..

아마 시작을 RN이나 Flutter로 시작하신 개발자 분들은 느끼실 거 같아요.. Native는  하나부터 열까지 내가 구현해야 하지만..

cross platform들은 정말 많은걸 컴포넌트화 해서 제공해 주는구나.. 정말 편하구나..라는 걸요..😂

 

아무튼 이상한 소리 그만하고 이번 포스트 주제인 React Hook API에 대해서 알아볼까요?

---

🔗 Hook이란?

React에서는 기존에 class 기반으로 작성하던 코드를 더 간단하게 만들 수 있도록
함수형 컴포넌트(functional component) 안에서 상태(state)와 생명주기(lifecycle)를 편리하게

관리할 수 있는 Hook이라는 기능을 제공해요.

쉽게 말해, Hook은 클래스 없이도 React의 다양한 기능을 사용할 수 있게 해주는 함수입니다.

---

💡 Hook의 핵심 특징

1. 기존의 코드를 완전히 바꿀 필요 없이, 일부 컴포넌트에서 점진적으로 적용할 수 있습니다.
2. Hook은 이전 버전의 React와 100% 호환됩니다. 기존 코드와 충돌 없이 도입이 가능합니다.
3. Hook은 props, state, context, ref, lifecycle 등 기존 React 개념을 더 직관적인 API로 다룰 수 있도록 도와줍니다.
4. Hook 자체는 React의 기존 개념을 대체하는 것이 아니라, 보완합니다.

자.. 이게 무슨 말이냐.. 하면

기존 class형 component로 작성한 React 코드를 functional component Hook API를 사용한다고 해서

한 번에 전부 functional component로 마이그레이션 할 필요가 없다는 뜻이에요. 즉, 혼합해서 쓸 수 있다!

또, 기존 class형 component에서 사용하던 componentDidMount / componentDidUpdate / componentWillUnmount와

같은 LifeCycle을 Hook API에서는 더 직관적으로 관리할 수 있도록 도와줘요.

---

✅ Hook 사용 규칙

Hook은 일반 함수처럼 보이지만, 다음 두 가지 규칙은 반드시 지켜야 해요.

1. 최상위에서만 호출해야 함

• Hook은 반복문, 조건문, 중첩 함수 안에서 호출할 수 없어요.
• 반드시 컴포넌트 함수의 최상단에서 호출해야 해요.

// ❌ 잘못된 사용
if (isVisible) {
  const [count, setCount] = useState(0);
}

// ✅ 올바른 사용
const [count, setCount] = useState(0);

2. React 함수형 컴포넌트 혹은 Custom Hook 내부에서만 호출

• 일반 JavaScript 함수나 클래스 메서드 안에서는 Hook을 사용할 수 없어요.
• Hook은 반드시 React 함수형 컴포넌트 또는 Custom Hook 내에서만 호출해야 돼요.

// ❌ 일반 함수에서는 호출 불가 
function doSomething() {
	useEffect(() => { ... }); // 오류 
}
// ✅ 컴포넌트 또는 커스텀 훅 내에서는 OK 
function MyComponent() { 
	useEffect(() => { ... }); 
}

 

---

📎 참고 링크

• 👉 React 공식 문서 - Hook 소개

Introducing Hooks – React

 

---

React Hook은 함수형 컴포넌트의 생산성과 유지보수성을 비약적으로 개선해 줘요.
기초 개념을 정확히 알고 사용하면, 훨씬 깔끔하고 직관적인 코드를 작성할 수 있어요!

다음 포스트에서는 useState, useEffect, useCallback 등 개별 Hook에 대한 정리도 이어서 올려볼게요 :)

 

예전에 작성했던 글을 첨삭해서 작성했는데 부족한 점이 많을 거예요..🥲

잘 못되었거나 수정할 부분이 있다면 언제든 댓글로 혼내주시길 바랍니다.!!

 

오늘도 긴 글 읽어주셔서 감사합니다.😊