🌱 기초 프론트엔드
Hook이 뭔가요?
쉽게 이해하기
레고 블록에 특수 기능을 추가하는 부품 같아요. 기본 블록(함수 컴포넌트)만으로는 움직이거나 소리를 낼 수 없지만, 모터나 스피커 부품(Hook)을 끼우면 다양한 기능을 사용할 수 있게 되는 거죠.
핵심 정리
Hook은 React에서 함수 컴포넌트에 상태와 생명주기 기능을 추가할 수 있게 해주는 특별한 함수예요.
자세히 알아보기
Hook은 2019년 React 16.8 버전에서 도입된 기능으로, 프론트엔드 개발 방식을 크게 바꿔놓았어요. 그 전에는 상태를 사용하려면 복잡한 클래스 컴포넌트를 써야 했지만, Hook 덕분에 간단한 함수로도 모든 기능을 사용할 수 있게 됐죠.
가장 많이 쓰는 Hook은 useState와 useEffect예요. useState는 컴포넌트에 상태(기억)를 추가하고, useEffect는 화면이 그려진 후 실행할 작업(API 호출, 타이머 등)을 정의해요. 이름이 모두 'use'로 시작하는 게 특징이죠.
Hook을 쓸 때는 두 가지 규칙을 꼭 지켜야 해요. 첫째, 컴포넌트의 최상위에서만 호출해야 해요. 반복문이나 조건문 안에서 쓰면 안 됩니다. 둘째, React 함수 컴포넌트나 커스텀 Hook 안에서만 사용해야 해요. 일반 JavaScript 함수에서는 못 써요.
실무에서는 기본 Hook 외에도 필요에 따라 커스텀 Hook을 만들어 써요. 예를 들어 'useLocalStorage'는 브라우저 저장소를 쉽게 다루게 해주고, 'useFetch'는 API 호출 로직을 재사용 가능하게 만들어줘요. Hook 덕분에 복잡한 로직을 작은 단위로 나눠서 관리할 수 있게 됐습니다.