TIL
110. React Hook 이란? TIL 23.01.11
새싹_v
2023. 1. 11. 23:56
728x90
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
A JavaScript library for building user interfaces
ko.reactjs.org
728x90