React Hooks 톺아보기 1 - 기본 Hooks 이해하기

React Hooks의 기본 개념과 주요 Hooks인 useState, useEffect, useContext에 대해 심층적으로 다룹니다. React 개발에 필수적인 기본 Hooks 이해를 도와드립니다.

 

React Hooks의 등장 배경

React는 컴포넌트 기반 아키텍처로 인해 복잡한 사용자 인터페이스를 효율적으로 관리할 수 있게 해주었지만, 클래스형 컴포넌트의 복잡성과 상태 관리의 어려움은 많은 개발자들에게 도전 과제로 남아 있었습니다. 이러한 문제를 해결하고자 React 팀은 2019년에 Hooks를 도입했습니다. Hooks는 함수형 컴포넌트에서도 상태와 라이프사이클 기능을 사용할 수 있게 함으로써 코드의 간결성과 재사용성을 크게 향상시켰습니다.

Hooks 사용의 장점

Hooks의 도입으로 인해 React 개발자들은 더욱 간결하고 이해하기 쉬운 코드를 작성할 수 있게 되었습니다. 주요 장점은 다음과 같습니다:

• 재사용성 향상: 커스텀 Hooks를 통해 로직을 쉽게 재사용할 수 있습니다.
• 가독성 증가: 함수형 컴포넌트는 클래스형보다 구조가 단순하여 이해하기 쉽습니다.
• 테스트 용이성: 함수형 컴포넌트는 테스트가 용이하며, 사이드 이펙트 관리가 쉬워집니다.

 

기본 Hooks 이해하기

React Hooks 중에서도 가장 기본적이고 자주 사용되는 세 가지 Hook인 useState, useEffect, useContext에 대해 자세히 알아보겠습니다.

useState

useState는 함수형 컴포넌트에서 상태(state)를 관리할 수 있게 해주는 Hook입니다. 상태 변수와 상태를 갱신할 수 있는 함수를 반환합니다.

사용법

import React, { useState } from 'react';

function Counter() {
	const [count, setCount] = useState(0);

	return (
		<div>
			<p>현재 카운트: {count}</p>
			<button onClick={() => setCount(count + 1)}>증가</button>
		</div>
	);
}

 

설명

• useState(초기값): 상태의 초기값을 설정합니다.
• count: 현재 상태 값을 나타냅니다.
• setCount: 상태 값을 갱신하는 함수입니다.

 

useEffect

useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있게 해주는 Hook입니다. 주로 데이터 패칭, 구독 설정, DOM 업데이트 등에 사용됩니다.

사용법

import React, { useState, useEffect } from 'react';

function DataFetcher() {
	const [data, setData] = useState(null);

	useEffect(() => {
		fetch('/api/data')
		.then(response => response.json())
		.then(result => setData(result));
	}, []);

	return <div>{data ? data.title : '로딩 중...'}</div>;
}

 

설명

• 첫 번째 인자: 수행할 사이드 이펙트 함수.
• 두 번째 인자: 의존성 배열. 빈 배열 []은 컴포넌트가 처음 마운트될 때만 실행됨을 의미.

 

useContext

useContext는 React의 Context API와 함께 사용되어, 컴포넌트 트리 전체에 걸쳐 데이터를 공유할 수 있게 해줍니다. 이를 통해 prop을 통해 데이터를 전달하지 않고도 깊숙한 곳의 컴포넌트에서 데이터를 사용할 수 있습니다.

사용법

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function ThemedButton() {
	const theme = useContext(ThemeContext);

	return <button style={{ background: theme.background, color: theme.color }}>테마 버튼</button>;
}

설명

• ThemeContext: 미리 생성된 Context 객체.
• useContext(ThemeContext): Context의 현재 값을 반환합니다.

 

실전 예제: 기본 Hooks 활용하기

기본 Hooks인 useState, useEffect, useContext를 사용하여 간단한 예제를 만들어보겠습니다.

예제: 간단한 테마 전환 앱

ThemeContext 설정

// ThemeContext.js
import React, { createContext, useState } from 'react';

export const ThemeContext = createContext();

export function ThemeProvider({ children }) {
	const [theme, setTheme] = useState({ background: '#ffffff', color: '#000000' });

	const toggleTheme = () => {
		setTheme(prevTheme =>
			prevTheme.background === '#ffffff'
			? { background: '#333333', color: '#ffffff' }
			: { background: '#ffffff', color: '#000000' }
		);
	};

	return (
		<ThemeContext.Provider value={{ theme, toggleTheme }}>
		{children}
		</ThemeContext.Provider>
	);
}

 

App 컴포넌트

// App.js
import React from 'react';
import { ThemeProvider } from './ThemeContext';
import ThemedButton from './ThemedButton';

function App() {
	return (
		<ThemeProvider>
			<div>
				<h1>React Hooks 기본 이해하기</h1>
				<ThemedButton />
			</div>
		</ThemeProvider>
	);
}

export default App;

 

ThemedButton 컴포넌트

// ThemedButton.js
import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function ThemedButton() {
	const { theme, toggleTheme } = useContext(ThemeContext);

	return (
		<button
			style={{ background: theme.background, color: theme.color, padding: '10px 20px', border: 'none', cursor: 'pointer' }}
			onClick={toggleTheme}
		>
			테마 전환
		</button>
	);
}

export default ThemedButton;

 

설명

• ThemeProvider: ThemeContext를 통해 테마 상태와 토글 함수를 제공합니다.
• App: ThemeProvider로 감싸서 하위 컴포넌트들이 테마에 접근할 수 있게 합니다.
• ThemedButton: useContext를 사용하여 테마 상태와 토글 함수를 가져와 버튼의 스타일을 동적으로 변경하고 테마를 전환합니다.

 

마무리하며

이번 글에서는 React Hooks의 기본 개념과 useState, useEffect, useContext의 사용법에 대해 자세히 살펴보았습니다. 이러한 기본 Hooks를 이해하고 활용하는 것은 React 개발의 기초를 다지는 데 매우 중요합니다. 다음 글에서는 "React Hooks 톺아보기 2 - 고급 Hooks 활용법"을 통해 useReducer, useMemo, useCallback 등 고급 Hooks의 활용 방법과 최적화 전략에 대해 자세히 다뤄보도록 하겠습니다.