Hook이란?
Hook이 뭔가요?
Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다.
React 공식문서 Hook개요 중
훅이란 State관련 로직을 쉽게 불러와 사용할 수 있도록 만든 함수이다. 상태 관련 로직이라 하면 상태 값을 저장-변경하고(useState), 원하는 생명주기에 코드를 실행시키고, (useEffect), 전역으로 상태값을 관리(useContext)하는 등의 로직을 이야기 한다.
기존 함수형 컴포넌트에서는 상태값의 활용 자체가 불가능했다. 함수형 컴포넌트가 리렌더링 될 때 변수를 새로이 선언하고 초기화하여 변수 객체에 저장하기 때문이다.
클래스형 컴포넌트는 상태 관련 로직의 재사용이 어렵고, 생명주기함수로 인해 코드가 복잡하며, props 등에 접근하기 위한 this라는 개념이 타 언어와 크게 달라 혼동이 많은 방식이다.
HOC
컴포넌트 재사용 방식으로 많이 활용된 방법이 HOC(High Order Component)로, 컴포넌트를 인자로 받아, 새로운 컴포넌트를 반환하는 함수이다. 즉, 새로운 컴포넌트를 특정 로직을 장착하여 재생성하는 함수이다.
리액트 훅은 컴포넌트 간 상태 로직의 재사용성을 확보하고, 컴포넌트를 보다 간결하고 직관적으로 작성하기 위해 추가된 기능이다. 내장된 Hook을 다수 제공하며, 직접 만들어 사용할 수도 있다.
Hook의 장점
- 코드를 간결하게 작성할 수 있다.
- 가독성이 좋다
- 패키지의 내장 기능의 상당수가 훅으로 지원되고 있다.
- 다수의 커스텀 훅을 가져와 사용할 수 있다.
- 상태 관리 로직의 재사용이 쉽다.
Hook을 사용하는 규칙
- 최상위에서만 호출할 수 있다.
- 반복문, 조건문, 함수 내부 등의 블록에서 호출할 수 없다.
- React의 함수형 컴포넌트 내에서만 호출 할 수 있다.
- (가급적이면) 생성한 커스텀 훅의 앞에는 use를 붙여 작명한다.
- React는 상단부터 순서대로 동작한다.
마무리
라이브러리 없이 Hook부터 굴려보자
참고문서
