[React] 리액트 훅(Hook)에 대해서 알아보자

목차

- 훅이란?

- 탄생 배경

- 종류

- 장점

 

 

훅(Hook)이란?

 

Hook은 리액트 16.8 버전 이후 추가된 기능이며, Hook이 등장하면서 더 이상 상태를 관리하기 위해 Class를 쓸 필요가 없어졌다. 기존에는 Class형 컴포넌트에서만 상태를 관리 할 수 있었고, 함수형 컴포넌트에서는 상태를 관리할 수 없었지만, Hook을 통해 상태 관리를 할 수 있게 되었고, 상태 관리 뿐만 아니라 기존 클래스형 컴포넌트에서만 가능하던 여러 기능을 사용할 수 있게 되었다.

 

Hook이 등장하기 전 리액트에는 여러 문제들이 있었다.

 

탄생배경

 

리액트 컴포넌트는 클래스형 컴포넌트(Class component)와 함수형 컴포넌트(Functional component)로 나뉜다.

기존의 개발방식은 일반적으로 함수형 컴포넌트를 주로 사용하되 state이나 Life Cycle Method를 사용해야 할 때에만 클래스형 컴포넌트를 사용하는 방식이었다.

이유는 클래스형 컴포넌트가 함수형 컴포넌트에 비해 가지는 단점 때문이다.

 

• 클래스 문법이 어렵다.
• 축소가 어렵다.
• Logic의 재사용이 어렵다.
• 최신 기술의 적용이 효과적이지 않다.
  
  

이러한 단점을 제외하고, 위에 언급한 state나 Life Cycle Method를 사용하기 위해서는 클래스형 컴포넌트 사용이 불가피했다.
하지만 Hooks가 등장하고 함수형 컴포넌트에서도 두 작업이 가능해졌다!

 

종류

 

기본 Hooks

1. useState (동적 상태 관리)
2. useEffect (side effect 수행 -mount/unmount/update)
3. useContext (컴포넌트를 중첩하지 않고도 전역 값 쉽게 관리)

추가 Hooks

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

 

장점

• 코드가 간결해진다.
• 가독성이 좋아진다.
• 많은 라이브러리들도 훅으로만 나오고 있다.
• HOC 헬을 벗어 날 수 있다.
• 불필요한 것 같은 코드를 적을 필요가 없다.

 

 

Reference

https://ykss.netlify.app/react/hooks/

리액트 Hook(훅)이란?

https://velog.io/@yangddu/React-Hook

[React] 리액트 훅(React Hook) 이란?

https://velog.io/@goyou123/React-Hooks-%EC%B4%9D%EC%A0%95%EB%A6%AC

React Hooks 총정리

https://surviveasdev.tistory.com/entry/React-hook%EC%9D%B4-%EB%82%98%EC%98%A8-%EC%9D%B4%EC%9C%A0%EC%99%80-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%95%BC-%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

React-hook 이 나온 이유와 사용 해야 하는 이유