My Boundary As Much As I Experienced

리액트 훅(React Hook)이란 본문

FrontEnd/React

리액트 훅(React Hook)이란

Bumang 2023. 10. 5. 09:13

 

 

- 클래스형 컴포넌트(Class Component)의 단점을 보안하여, 함수형 컴포넌트(Functional Component)를 사용 할 수 있도록 등장한 것이 React Hook(리액트 훅)

 

리액트 v16.8에 새로 도입된 기능으로, 함수형 컴포넌트(Functional Component)에서 사용되는 몇가지 기술들을 일컫는다. 리액트 훅은 함수형 컴포넌트(Functional Component)가 클래스형 컴포넌트(Class Component)의기능을 사용 할 수 있도록 해주며 대표적인 예로는 useState, useEffect 등이 존재한다.

 

 

내장 Hooks

- useState

- useEffect

- useContext

 

추가 Hooks

  1. useReducer (복잡한 컴포넌트들의 state를 관리 -분리)
  2. useCallback (특정 함수 재사용)
  3. useMemo (연산한 값 재사용)
  4. useRef (DOM선택, 컴포넌트 안에서 조회/수정할 수 있는 변수 관리)
  5. useImperativeHandle
  6. useLayoutEffect
  7. useDebugValue

 

Custom Hook

내장 훅을 이용하여 커스텀 훅을 만들 수 있다.

'FrontEnd > React' 카테고리의 다른 글

React) 메모이제이션  (0) 2023.10.17
React) Key Props를 사용하는 이유  (0) 2023.10.17
React의 Props Drilling  (0) 2023.10.10
클래스형 컴포넌트 vs 함수형 컴포넌트  (0) 2023.10.05
리액트의 라이프 사이클  (0) 2023.09.12