🐨CoalaCoding
DocsExamplesTry itBoardB반
🐨CoalaCoding

개발자를 위한 한국어 웹 기술 문서

문서

  • JavaScript
  • Web Publishing
  • React
  • Python

커뮤니티

  • 게시판
  • 예제 모음
  • Try it 에디터

기타

  • GitHub
  • 관리자
© 2026 CoalaCoding. All rights reserved.
  • 01_hook
  • 02_시작
  • 03_react-vite-설치
  • 04_노코드리액트
  • 05_csrssrreact-렌더링-참조글
  • 06_컴포넌트
  • 07_시작하기
  • 08_2-scaffolding-react-project
  • 09_props
  • 10_3-웹문서-작성하기
  • 11_컴포넌트
  • 12_map과컴포넌트
  • 13_event
  • 14_4-리액트로-변경하기
  • 15_컴포넌트-데이터관리
  • 16_composition
  • 17_앱제작-준비
  • 21_환경설정
  • 24_컴포넌트-전략
  • 25_리액트-네이버-로그인
  • 26_리액트교안
  • 0_React 학습 전 필수 JavaScript 문법
  • 1_React 개발 환경 이해
  • 2_React 소스 코드 수정, 배포 및 렌더링
  • 3_JSX 문법과 컴포넌트
  • 4_Props (속성)
  • 5_이벤트 처리
  • 6_Hook
  • 7_useContext로 전역 상태 관리
  • 8. React Router
  • 9_CSS 리액트에 넣는 5가지 방법
  1. 홈
  2. 문서
  3. React
  4. React 기초
  5. 01_hook

01_hook

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

1. 개념

Hook은 함수 컴포넌트에서 상태 관리와 생명주기 기능을 연동할 수 있게 해주는 함수이다. Hook은 React 버전 16.8부터 새로 추가된 기능이다. Hook을 사용하려면 모든 React 패키지(예: React DOM)가 16.8.0 이상이어야 한다. 패키지를 모두 업데이트하지 않으면 Hook이 작동하지 않는다. Hook이 등장하고 가장 달라진 점은, 클래스 컴포넌트에서만 사용할 수 있던 유용한 기능들을 함수 컴포넌트에서도 사용할 수 있게 되었다는 것이다. 함수 컴포넌트는 상태를 가질 수 없고, 메서드를 사용해 생명주기를 관리할 수 없다. 그래서 기존에는 코드의 복잡성과 낮은 재사용성 등의 여러 문제점에도 불구하고 클래스 컴포넌트를 사용해야만 했다. 하지만 Hook이 등장하면서 함수 컴포넌트를 이용해 더욱 간결하고 효율적인 코드로 상태 관리 및 생명주기 기능을 사용할 수 있게 되었다.

2. 종류

3. API

🔗링크

4. 규칙

1. 함수형 컴포넌트 내에서만 호출해야 한다. 2. 최상위에서만 Hook을 호출한다. 반복,중첩문 등 기타 다른 함수 내에서 호출 할수 없다.

목차

  • 구문