- Published On
React hook 이란?
React Hook이란?
React Hook은 함수형 컴포넌트에서 상태와 라이프사이클 관련 기능을 손쉽게 사용할 수 있게 해주는 함수입니다.
이를 통해 클래스형 컴포넌트에서 제공하는 복잡한 메서드 없이도 상태 관리와 부수 효과(side effects) 처리 등을 구현할 수 있습니다.
React에서 사용자 정의 훅을 만들 때, 접두어로 반드시 use를 사용해야 합니다. 그렇지 않으면 아래의 같은 경고가 발생할 수 있습니다.
React Hook "useState" is called in function "tem" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".
따라서 사용자 정의 훅의 이름은 useXXX 형식으로 작성하는 것을 권장합니다.
예를 들어, useFetch 또는 useToggle과 같은 이름을 사용할 수 있습니다.
컴포넌트 생명주기
React 컴포넌트는 생성, 업데이트, 소멸이라는 세 가지 주요 단계로 나뉩니다.
각 단계마다 다양한 라이프사이클 메서드가 호출되며, 이를 통해 컴포넌트의 상태를 관리하고 특정 동작을 수행할 수 있습니다.
Component Lifecycle Phases
| 단계 | 설명 |
|---|---|
| Mounting | 컴포넌트가 처음 DOM에 삽입될 때. |
| Updating | 컴포넌트가 리렌더링될 때. |
| Unmounting | 컴포넌트가 DOM에서 제거될 때. |
React 16.8 이후, 함수형 컴포넌트에서도 Hooks를 통해 이와 같은 라이프사이클 기능을 대체할 수 있습니다.
예를 들어 useEffect는 componentDidMount, componentDidUpdate, componentWillUnmount를 대체하며 더 직관적인 방식으로 사용할 수 있습니다.
주요 Hooks
| Hook | 설명 |
|---|---|
useState | 컴포넌트 내에서 상태를 관리하며, 상태를 변경할 수 있는 함수 반환. |
useEffect | 부수 효과를 처리하는 데 사용되며, 주로 데이터 페칭, 구독 등에 활용. |
useRef | DOM 요소나 컴포넌트 상태에 영향을 주지 않고 값을 저장. |
useMemo | 무거운 연산을 캐싱하여 성능 최적화. |
useCallback | 함수의 재생성을 방지하여 성능을 최적화. |
useState
- useState는 배열을 반환하며, 첫 번째 요소는 상태 값, 두 번째 요소는 상태를 업데이트하는 함수입니다.
- 상태 업데이트 함수는 현재 상태를 인자로 받아 새로운 상태를 반환할 수 있습니다.
import React, { useState } from "react";
const Counter: React.FC = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
export default Counter;
// 사용 방법
const [count, setCount] = useState(0);
// 상태를 직접 설정
setCount(5);
// 상태를 이전 상태에 기반하여 업데이트
setCount((prevCount) => prevCount + 1);
useEffect
- useEffect는 기본적으로 컴포넌트가 렌더링될 때마다 호출됩니다.
- 두 번째 인자로 전달되는 배열은 의존성 배열(dependency array)로, 이 배열의 값이 변경될 때만 이펙트가 실행됩니다.
- 의존성 배열이 빈 배열일 경우, 이펙트는 컴포넌트가 마운트될 때 한 번만 실행됩니다.
- useEffect는 정리(cleanup) 함수를 반환할 수 있으며, 이는 컴포넌트가 언마운트되기 전에 또는 다음 이펙트가 실행되기 전에 호출됩니다.
// 사용 방법 예시
useEffect(() => {
const handleResize = () => {
console.log("Window resized");
};
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, []); // 빈 배열이므로 마운트와 언마운트 시에만 실행
useRef
useState와 달리, 값이 변경되어도 컴포넌트가 리렌더링되지 않습니다.
-
DOM 요소 접근: useRef는 컴포넌트가 마운트된 후 특정 DOM 요소에 접근할 수 있도록 도와줍니다. 예를 들어, 특정 입력 필드에 포커스를 설정하거나, 캔버스 요소에 그리기 작업을 할 때 유용합니다.
-
값 저장: useRef는 컴포넌트가 리렌더링될 때마다 초기화되지 않는 값을 저장하는 데 사용됩니다. 이전 상태를 추적하거나, 컴포넌트 내에서 전역 변수를 사용하는 것과 비슷하게 동작합니다.
import React, { useRef, useEffect } from "react";
const FocusInput: React.FC = () => {
const inputRef = useRef < HTMLInputElement > null;
useEffect(() => {
inputRef.current?.focus();
}, []);
return <input ref={inputRef} />;
};
export default FocusInput;
useMemo
useMemo는 메모이제이션된 값을 반환하며, 성능 최적화를 위해 사용됩니다.
주로 무거운 계산을 방지하기 위해 사용되며, 마우스 및 드레그 핸들링에 자주 사용됩니다.
import React, { useMemo, useState } from "react";
const ExpensiveComponent: React.FC = () => {
const [count, setCount] = useState(0);
const expensiveValue = useMemo(() => {
console.log("Calculating expensive value...");
return count * 2;
}, [count]);
return (
<div>
<p>Expensive value: {expensiveValue}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
export default ExpensiveComponent;
useCallback
useCallback은 메모이제이션된 콜백 함수를 반환하며, 성능 최적화를 위해 사용됩니다.
주로 콜백 함수가 자식 컴포넌트에 전달될 때 사용됩니다.
즉, 함수를 저장하여 반복 실행할때 효과적으로 사용할 수 있습니다.
const router = useRouter();
const backbtn = useCallback(() => {
router.back();
}, [router]);
커스텀 훅 (Custom Hooks)
커스텀 훅은 개발자가 필요에 따라 만든 훅으로, 여러 컴포넌트에서 반복되는 로직을 재사용할 수 있습니다. 커스텀 훅은 React의 기존 훅을 조합하여 공통 기능을 분리해낼 수 있으며, 함수 이름은 반드시 use로 시작해야 합니다.
커스텀 훅의 장점
| 장점 | 설명 |
|---|---|
| 코드 재사용성 | 여러 컴포넌트에서 중복되는 로직을 커스텀 훅으로 분리해 재사용 가능. |
| 구조화 및 가독성 향상 | 로직을 컴포넌트 외부로 분리하여 코드의 가독성을 높임. |
| 유지보수 용이성 | 공통 로직을 하나의 훅으로 관리해 유지보수가 용이함. |
| 상태 공유 가능 | 여러 컴포넌트 간에 상태와 로직을 쉽게 공유할 수 있음. |
커스텀 훅의 단점
| 단점 | 설명 |
|---|---|
| 디버깅이 어려움 | 로직이 분리되면 흐름을 추적하기 어려워질 수 있음. |
| 성능 문제 | 비효율적으로 사용하면 성능 문제가 발생할 수 있음. |
| 과도한 추상화 | 지나치게 추상화하면 코드가 복잡해질 수 있음. |
| React 규칙 준수 필요 | 훅은 특정 규칙을 따라야 하며, 이를 어기면 예상치 못한 동작 발생 가능. |
참조
이전 포스트
Next.js 커스텀 서버다음 포스트
Node.js란?연관된 포스트 구경가기