[React] react hook

KoEunseo·2023년 2월 25일
0

리액트

목록 보기
15/21

리액트 훅은 함수형 컴포넌트에서 상태관리 및 라이프사이클 메서드 등의 기능을 제공한다.

기존에는 클래스형 컴포넌트에서만 상태 관리를 할 수 있었지만, 함수형 컴포넌트에서도 상태 관리를 할 수 있게 되었다. 이를 통해 코드의 가독성재사용성이 좋아졌으며, 컴포넌트의 구현이 단순화되어 개발자의 생산성을 높일 수 있다.

React Hook에는 useState, useEffect, useContext, useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect 등 다양한 함수가 제공된다. 이들 함수를 사용하면 상태 관리, 라이프사이클 처리, 이벤트 처리 등의 작업을 보다 간결하게 처리할 수 있다.
예를 들어 useState 함수를 사용하면 함수형 컴포넌트에서도 상태를 관리할 수 있다. useEffect 함수를 사용하면 컴포넌트가 렌더링될 때마다 특정 작업을 수행하거나, 특정 상태가 변경될 때마다 작업을 수행할 수 있다.

또한 React Hook은 컴포넌트 간의 상태 공유와 관련된 문제를 해결하기 위해 제공되는 useContext 함수나, 복잡한 상태 관리를 위해 제공되는 useReducer 함수 등 다양한 기능을 제공하며, 사용자 정의 Hook을 만들어 재사용성을 높일 수도 있다.

Custom Hook

리액트에서 커스텀 훅은, 렌더링 로직과 상태 로직을 별도의 함수로 분리하여 재사용할 수 있도록 만들어주는 기능이다. 기존의 클래스형 컴포넌트에서는 상태와 라이프사이클 메서드가 클래스 내부에 선언되어 있어서 로직의 재사용이 어렵고 가독성도 떨어지는 문제가 있었다. 이러한 문제를 해결하고자 훅이라는 개념이 도입되었다.

커스텀 훅은 use로 시작하는 함수로 정의할 수 있으며, 내부에서 useState, useEffect, useReducer 등의 훅을 사용하여 상태와 라이프사이클 로직을 구현할 수 있다. 커스텀 훅을 사용하면 기존의 렌더링 로직과 상태 로직이 섞인 컴포넌트를 보다 간결하고 가독성이 높은 함수형 컴포넌트로 작성할 수 있다. 또한, 여러 컴포넌트에서 같은 로직을 사용하는 경우 해당 로직을 커스텀 훅으로 분리하여 재사용할 수 있으며, 컴포넌트의 테스트도 용이해진다.

0개의 댓글