React의 hooks란?

조영민·2022년 3월 23일
0
post-thumbnail

Hooks 는 리액트 v16.8 에 새로 도입된 기능이다.
함수형태의 컴포넌트에서 사용되는 몇가지 기술을 Hook이라고 부른다.

hook의 기능

  • Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다.

  • useState와 useEffect를 사용하여 특징적으로 state와 lifecycle과 같은 기능을 사용 가능하게 해준다.

hook을 사용하는 이유

Higher Order Component란
화면에 재사용 가능한 로직을 분리하여 컴포넌트로 만들고, 재사용 불가능한 부분(ex. UI)은 
파라미터로 받아서 처리하는 방법이다. 
1번을 간단하게 요약하면 재사용 가능한 로직을 쉽게 만들수 있다라는 의미이다.

hook의 장점
더 빠른 성능과 짧은 코드의 양
리액트에서 작성한 코드를 실행할 때 바벨을 이용해서 코드를 컴파일한 후 실행 시키는데, 클래스형의 경우 코드의 양이 길어진다. 또한, 클래스형에서 라이프사이클을 이용할경우 ComponentDidMount, ComponentDidUpdate, ComponentWillMount 모두 다르게 처리하지만, react hook을 사용하면 useEffect안에서 모두 처리 가능하다.

간단요약
1. 작성할 코드 양이 줄어든다.
2. 가독성이 좋아진다.
3. 재사용 가능한 로직을 쉽게 만들 수 있다.

다음은 리액트 공식문서에서 정의된 hook이다.

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

profile
프론트엔드 개발자

0개의 댓글