React Hooks는 함수 컴포넌트에서 상태 관리와 생명주기 기능을 사용할 수 있게 해주며, 클래스 컴포넌트 없이 UI 로직에서 상태 관리와 부수 효과를 단순화했습니다. 이 가이드에서는 가장 일반적으로 사용되는 Hooks인 useState와 useEffect를 심층적으로 탐구하고, 컴포넌트의 기능을 확장하기 위해 사용자 정의 Hooks를 만드는 방법을 설명합니다.
React Hooks 이해하기
Hooks는 함수 컴포넌트에서 React 상태와 생명주기 기능에 “연결”할 수 있게 해주는 함수입니다. 그것들은 클래스 컴포넌트를 작성하지 않고도 상태 관리와 부수 효과를 간단하게 만듭니다.
useState Hook
1. 기본 사용법
useState 후크는 함수 컴포넌트에 상태를 추가할 수 있게 해줍니다. 간단한 카운터 예시는 다음과 같습니다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
import React, { useState } from ‘react’;
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
|
cs |
2. 고급 상태 관리
이전 상태와 객체 확산을 사용하여 useState로 복잡한 상태 로직 관리.
useEffect Hook
1. React에서의 부수 효과
useEffect 후크는 함수 컴포넌트에서 부수 효과를 수행할 수 있게 해줍니다, 예를 들어 데이터 가져오기, 구독 설정 또는 DOM 수동 변경 등입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
import React, { useState, useEffect } from ‘react’;
function Example() {
const [data, setData] = useState({ hits: [] });
useEffect(() => {
const fetchData = async () => {
const result = await axios(
‘http://hn.algolia.com/api/v1/search?query=react’,
);
setData(result.data);
};
fetchData();
}, []);
return (
<ul>
{data.hits.map(item => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>
))}
</ul>
);
}
|
cs |
사용자 정의 후크 만들기
1. 왜 그리고 어떻게
사용자 정의 후크를 사용하면 재사용 가능한 상태풀 로직을 만들 수 있습니다. 윈도우 너비를 추적하는 간단한 후크 예제는 다음과 같습니다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
import { useState, useEffect } from ‘react’;
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener(‘resize’, handleResize);
return () => window.removeEventListener(‘resize’, handleResize);
}, []);
return width;
}
|
cs |
2. 사용자 정의 후크 사용하기
컴포넌트에서 사용자 정의 후크를 사용하여 로직을 효과적으로 공유합니다
|
1
2
3
4
|
function MyComponent() {
const width = useWindowWidth();
return <p>Window width is {width}</p>;
}
|
cs |
일반적인 패턴
- 후크 규칙: 후크는 반드시 최상위에서만 호출해야 하며 React 함수 컴포넌트나 사용자 정의 후크에서만 호출해야 합니다.
- 성능 최적화: 불필요한 렌더링을 방지하기 위한 메모이제이션과 콜백 최적화 기법.
- 상태 관리 패턴: 복잡한 상태와 부수 효과를 효율적으로 관리하기 위한 전략.
React Hooks는 함수 컴포넌트에서 상태와 부수 효과를 다루는 강력하고 우아한 방법을 제공합니다. useState, useEffect, 그리고 사용자 정의 후크를 이해하고 활용함으로써, React 애플리케이션에서 더 깨끗하고 모듈화되며 재사용 가능한 코드를 작성할 수 있습니다.
. React Hooks, React에서 useState, useEffect 사용법, 사용자 정의 후크 만들기, React 상태 관리