리액트 훅(Hooks) 소개
리액트 훅이란?
리액트 훅은 함수형 컴포넌트에서 상태 관리 및 생명주기 메서드 등을 사용하기 위한 기능입니다. 훅을 사용하면 클래스형 컴포넌트 없이도 상태를 관리하고, 컴포넌트의 생명주기에 맞는 작업을 할 수 있습니다. useState, useEffect, useContext 등 다양한 훅들이 제공됩니다. 훅은 컴포넌트의 로직을 재사용 가능하게 만들어 코드의 가독성을 높이고, 유지보수를 용이하게 합니다. 함수형 컴포넌트로 작성된 리액트 애플리케이션에서 강력하고 효율적인 기능을 제공합니다.
useState 훅
useState 훅은 컴포넌트의 상태를 관리하기 위해 사용됩니다. 클래스형 컴포넌트에서 this.state와 this.setState를 사용하는 것과 같은 역할을 합니다. useState는 변수와 이를 업데이트할 수 있는 함수를 반환하며, 이 값을 변경하면 컴포넌트가 다시 렌더링됩니다. 예를 들어, 버튼 클릭 시 카운트를 증가시키는 상태를 관리할 수 있습니다. useState는 초기값을 인자로 받아 상태를 설정하고, 상태가 변경될 때마다 UI가 갱신됩니다.
useEffect 훅
useEffect 훅은 컴포넌트가 렌더링된 후 실행되는 부수 효과(side effects)를 관리합니다. 이는 클래스형 컴포넌트에서 componentDidMount, componentDidUpdate, componentWillUnmount의 기능을 대체합니다. 예를 들어, 데이터 fetching, 이벤트 리스너 등록, 타이머 설정 등 다양한 부수 효과를 처리할 수 있습니다. useEffect는 렌더링 후에 실행되며, 의존성 배열을 통해 언제 이 효과를 실행할지 제어할 수 있습니다. 또한, useEffect 내부에서 반환하는 함수는 컴포넌트가 언마운트될 때 정리(cleanup) 작업을 처리하는 데 사용됩니다.
useContext 훅
useContext 훅은 리액트의 Context API와 함께 사용되어, 컴포넌트 트리에서 데이터나 상태를 전역적으로 공유할 수 있도록 합니다. 이를 통해 복잡한 props 전달 없이, 여러 컴포넌트 간에 데이터를 공유할 수 있습니다. 예를 들어, 테마 설정이나 사용자 인증 상태와 같은 글로벌 상태를 쉽게 관리할 수 있습니다. useContext는 전달된 Context 객체를 인자로 받아 해당 값에 접근합니다. 이를 사용하면 중첩된 컴포넌트 간에 props를 전달하는 부담을 줄일 수 있습니다.
커스텀 훅 (Custom Hooks)
커스텀 훅은 여러 훅을 조합하여 재사용 가능한 로직을 만드는 데 사용됩니다. useState, useEffect, useContext 등의 기본 훅을 결합하여, 복잡한 로직을 재사용 가능한 훅으로 추출할 수 있습니다. 예를 들어, 사용자 인증 상태를 관리하는 훅을 만들어 여러 컴포넌트에서 재사용할 수 있습니다. 커스텀 훅은 다른 훅과 마찬가지로 use로 시작하는 이름을 가져야 하며, 이를 통해 코드의 모듈화와 가독성을 높일 수 있습니다. 커스텀 훅은 필요한 로직을 캡슐화하고, 중복을 줄여 코드의 유지보수성을 개선합니다.