처음 만난 리액트 문서
7.1 Hooks란 무엇인가?
앞에서 리액트 컴포넌트에 대해 배울 때 컴포넌트에는 두 가지 종류가 있다고 배웠습니다. 하나는 클래스 컴포넌트이고 다른 하나는 함수 컴포넌트였죠. 그리고 컴포넌트에는 state라는 중요한 개념이 등장합니다. 이 state를 이용해서 렌더링에 필요한 데이터들을 관리하게 되죠.
클래스 컴포넌트에서는 생성자(constructor)에서 이 state를 정의하고, setState()함수를 통해서 state를 업데이트 합니다. 이처럼 클래스 컴포넌트는 state와 관련된 기능뿐만 아니라 컴포넌트의 라이프사이클 함수들까지 모두 명확하게 다 정의가 되어 있기 때문에, 잘 가져다가 쓰기만 하면 됩니다.
하지만 기존의 함수 컴포넌트는 클래스 컴포넌트와는 다르게 코드도 굉장히 간결하고, 별도로 state를 정의해서 사용하거나 컴포넌트의 라이프사이클에 맞춰서 어떤 코드들이 실행되도록 할 수가 없었습니다. 그래서 함수 컴포넌트에서 그러한 기능들을 지원하기 위해서 나온 것이 바로 훅(Hook)입니다. 훅을 사용하면 함수 컴포넌트도 클래스 컴포넌트의 기능들을 모두 다 동일하게 구현할 수 있게 되는 것이죠.
Hook이라는 영어 단어는 갈고리라는 뜻을 갖고 있는데요, 보통 프로그래밍에서는 원래 존재하는 어떤 기능에 마치 갈고리를 거는 것처럼 끼어 들어가서 같이 수행되는 것을 의미합니다. 리액트의 Hook도 마찬가지로 리액트의 state와 라이프사이클의 기능들에 갈고리를 걸어서 원하는 시점에 정해진 함수들이 실행되도록 만든 것입니다. 그리고 이때 실행되는 함수들을 Hook이라고 부르겠다라고 정한것이죠.
이러한 훅들의 이름은 모두 use로 시작합니다. 훅이 수행하는 기능에 따라서 이름이 지어졌는데, 그 기능을 사용하겠다는 의미로 use를 앞에 붙여서 이름을 지었습니다. 그리고 개발자가 직접 커스텀훅을 만들어서 사용할 수도 있는데, 커스텀훅은 개발자 맘대로 이름을 지을 수 있지만, 뒤에서 배울 훅의 규칙에 따라 이름 앞에 use를 붙여서 훅이라는 것을 나타내주어야 합니다. 이제부터 대표적인 훅들에 대해서 하나씩 알아보도록 하겠습니다.
마지막 업데이트: 2025년 08월 21일 09시 05분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page