React Hooks란 무엇인가?

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 초보 개발자에게 유용한 내용
• 난이도: 중간 (기초 React 지식이 필요)

핵심 요약

• React Hooks는 함수형 컴포넌트에서 상태 관리와 부작용 처리를 가능하게 하는 JavaScript 함수
• v16.8에서 도입되어 클래스 컴포넌트의 복잡성을 줄임
• use 접두사 사용, 조건문 내 사용 금지, 커스텀 훅 내에서는 내장 훅 사용 가능 등 사용 규칙이 엄격함

섹션별 세부 요약

1. React의 진화와 문제점

• 클래스 컴포넌트는 this 키워드 사용, 상태 관리 복잡, UI 렌더링 동기적
• 함수형 컴포넌트 도입으로 코드 간결성 향상
• React Fiber로 UI 업데이트 비동기 처리 가능

2. Hooks의 등장과 목적

• v16.8에서 Hooks 도입으로 함수형 컴포넌트에 상태/부작용 추가 가능
• useState, useEffect 등으로 상태 관리 및 라이프사이클 훅 제공
• 함수형 컴포넌트가 무상태였던 문제 해결

3. Hooks 사용 규칙

• 컴포넌트 내부에서만 호출해야 함 (예: useEffect() 외부 사용 시 ❌)
• use 접두사 사용 필수 (예: useState, useEffect)
• 조건문 내 사용 금지 (예: if(a == 0) useEffect() ❌)
• 내장 훅 내부에서 다른 훅 사용 금지 (예: useEffect() 내 useState() ❌)
• 커스텀 훅 내에서는 내장 훅/커스텀 훅 사용 가능 (예: useClick() 내 useEffect() ✅)
• 비동기 함수로 선언 금지 (예: async function useClick() ❌)

결론

• Hooks는 함수형 컴포넌트의 상태/부작용 관리를 간단하게 제공
• use 접두사, 조건문 사용 금지, 컴포넌트 내부 호출 등 규칙 준수가 필수
• 비동기 훅 사용은 피하고, 커스텀 훅을 통해 재사용성 강화해야 함