110. React Hook 이란? TIL 23.01.11

---

 

React Hook란?

 Hook은 React 16.8 버전에 새로 추가된 최신 기능으로, 클래스형 컴포넌트의 단점을 극복하고자 나온 함수형 컴포넌트에 대한 기능이다.
Hook은 함수형 컴포넌트로도 클래스형 컴포넌트의 기능을 사용할 수 있도록 해준다.

 

 

굳이 잘 쓰고 있던 클래스형 컴포넌트를 함수형 컴포넌트로 바꿔야 하는 이유!

리액트를 배우는 데에 있어서 클래스는 큰 진입장벽이다. 코드의 재사용성과 코드 구성을 어렵게 만들고,
this의 사용이나 이벤트 핸들러의 등록 등 기본적인 JS문법 사앙을 알아야 다룰 수 있기 때문
- 클래스의 문법이 어렵다
- 축소가 어렵다.
- reloading의 신뢰성이 떨어진다.
- 최신 기술의 적용이 효과적이지 않다.

👉 이러한 클래스의 단점을 함수형 컴포넌트로 커버할 수 있다. 하지만 클래스 컴포넌트의 장점인 state사용이나 life cycle을 직접 다루는 등의 기능을 사용하지 못한다. 이를 해결하기 위해 Hook이 등장했다.

 

 

Hook의 기능

- Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능
- useState와 useEffect를 사용하여 특징적으로 state와 lifecycle과 같은 기능을 사용 가능하게 해 준다.

State Hook - useState
Effect Hook - useEffect

 

https://ko.reactjs.org/docs/hooks-overview.html

Hook 개요 – React