All'alba vincerò

At dawn, I will win!

React/한입 리액트

React Hooks

나디아 Nadia 2024. 3. 19. 13:56

 

 

React Hooks 

 

 

 

Hooks

: class 컴포넌트의 기능을 함수 컴포넌트에서도 이용할 수 있도록 도와주는 메서드 (ex. useState, useRef...)

  • Hooks는 이름 앞에 접두사 use가 붙는다.
  • 각각의 메서드는 Hook(훅)이라고 부른다.

 

 

 

 

 

 

 

 

📌 Hook의 특징

 

1. 함수 컴포넌트, 커스텀 훅(Custom Hook) 내부에서만 호출 가능

 

 

 

 

 

2. 조건부(조건문, 반복문)로 호출 불가능



 

 

 

3. 나만의 훅(Custom Hook)을 직접 생성 가능

 

 

📌 Custom Hook 만들기

함수명 앞에 use 붙이기 (useXXX)

  • 컴포넌트마다 반복되는 로직 + Hook을 이용하는 로직
    👉 커스텀 훅으로 분리하여 사용하면 좋음

 

 

 

 

 

+ hooks 파일에 별도의 이름으로 보관하는게 일반적이다.

 

 

 


 

 

출처

한입 크기로 잘라먹는 리액트