내장 React Hooks 사용하기
리액트 사용법 완벽 가이드: Built-in React Hooks 사용법
리액트 Hook의 중요성과 배경
리액트는 현대 웹 개발에서 강력하고 유용한 도구 중 하나입니다. 리액트의 대표적인 기능인 Hook은 리액트 React 16.8 버전에서 소개되었습니다. 이 Hook을 사용하면 클래스형 컴포넌트 없이도 상태와 생명주기 메서드 같은 기능들을 함수형 컴포넌트에서 보다 간편하게 사용할 수 있습니다.
리액트 Hook은 상태 관리와 사이드 이펙트를 처리하는 데 유용하며, 다음과 같은 기본적인 Hook들이 있습니다:
useState- 상태를 관리하기 위한 HookuseEffect- 컴포넌트가 렌더링된 이후 실행되는 작업들(Side Effect)을 처리하기 위한 HookuseRef- DOM 요소 접근 및 유지보수가 필요한 값을 저장하기 위한 Hook
이 장에서는 이러한 Built-in React Hooks를 사용하는 방법과 그 장점에 대해 자세히 살펴보겠습니다.
useState를 사용한 상태 관리
useState는 컴포넌트에서 상태를 관리할 수 있게 해주는 Hook입니다. 상태는 일반적으로 컴포넌트의 데이터 부분으로 사용되며, 사용자 인터페이스와 데이터 간의 상호작용에서 중요한 역할을 합니다.
예제: 기본적인 useState 사용법
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>증가</button>
<button onClick={() => setCount(count - 1)}>감소</button>
</div>
);
}
export default Counter;위 예제에서는 간단한 카운터 컴포넌트를 구현합니다. useState를 이용하여 count 상태를 관리하고, 버튼 클릭 시 상태가 업데이트 됩니다.
useEffect를 사용한 사이드 이펙트 처리
useEffect는 데이터 fetch, 타이머 설정 등과 같이 컴포넌트가 렌더링된 이후 수행해야 할 작업들을 처리할 때 사용할 수 있습니다.
예제: 데이터 fetch
import React, { useState, useEffect } from 'react';
function DataFetcher() {
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => setData(data));
}, []);
return (
<div>
<h1>Fetched Data:</h1>
<ul>
{data.map(item => (
<li key={item.id}>{item.title}</li>
))}
</ul>
</div>
);
}
export default DataFetcher;위 코드는 useEffect를 사용하여 데이터 fetch를 실행합니다. 빈 배열인 []을 두 번째 인자로 넘겨서 이 Effect가 처음 컴포넌트 렌더링 시에만 실행되도록 합니다.
결론
리액트 Hook은 리액트 개발을 훨씬 간결하고 직관적으로 만들어주는 도구입니다. 특히 useState와 useEffect 같은 기본 Hook들은 상태 관리와 사이드 이펙트 처리에서 필수적입니다. 이 챕터에서는 이러한 기본 Hook을 사용하는 구체적인 예제를 통해 React 컴포넌트를 효율적으로 개발하는 방법을 알아보았습니다.
다음 장에서는 보다 복잡한 상태 관리 방법과 커스텀 Hook 작성법을 살펴볼 것입니다.
