리액트 훅(Hooks)란?

리액트 훅(Hooks)은 함수형 컴포넌트에서도 클래스형 컴포넌트 같은 상태 관리와 생명주기등의 로직을 쉽게 사용할 수 있도록 도와주는 기능이다.

Hook은 영어로 갈고리라는 뜻을 갖고 있는데 프로그래밍에서는 원래 있는 어떤 기능에 갈고리를 거는 것 처럼 같이 수행되는기능을 의미하며 훅의 이름은 모두 use로 시작한다.

이전에는 상태관리나 생명주기 관련 기능을 사용하려면 클래스형 컴포넌트를 사용해야 했다.

그러나 리액트 16.8부터 훅이 도입되면서 함수형 컴포넌트에서도 이런 기능을 활용할 수 있게 되었다.

 

훅을 사용하는 이유

1. 간결한 코드

• 클래스형 컴포넌트의 복잡한 구조(생성자, 메서드 바인딩 등)을 피할 수 있다.
• 함수형 컴포넌트에서 상태와 로직을 훨씬 직관적으로 관리 할 수 있다.

2. 재사용성 증가

• 훅을 사용하면 상태 관리와 로직을 별도의 커스텀 훅으로 추출해서 재사용할 수 있다.

3. 직관적인 생명주기 관리

• 클래스형 컴포넌트는 생명주기 메서드(componentDidMount, componentDidUpdate, componentWillUnmount)가 따로 나뉘어 있지만, 훅에서는 useEffect 하나로 통합적으로 관리할 수 있다.

 

주요 훅 소개

• useState(상태 관리) :  컴포넌트에서 상태값을 선언하고 관리할 때 사용
• useEffect(부수 효과 관리) : API호출, DOM 조작, 이벤트 등록 같은 부수적인 작업(side effects)을 처리할 때 사용
• useRef(DOM 접근 및 참조값 저장) : 컴포넌트의 특정 DOM 요소에 접근하거나 값이 렌더링 간 변경되지 않도록 참조값을 저장할 때 사용
• useContext(전역 상태 관리) : 컴포넌트 계측 구저가 깊을 때, props를 일일이 전달하지 않고도 데이터를 공유할 수 있다.