개요
누군가 최신 React 개발의 핵심으로 어떤 것이 있냐고 질문하면, 나는 상태관리를 그에 대한 답변으로 제시할 것이다.
효과적인 상태관리는 애플리케이션을
- 더 유지 관리하기 쉽고,
- 확장 가능하고,
- 이해하기 쉽게 만들 수 있다.
오늘은 상태 관리를 위한 React의 두 가지 강력한 도구인 커스텀 훅과 컨텍스트 API에 대해 알아볼건데,
이 블로그 포스트에서는 이 도구들이 무엇인지, 어떻게 사용하는지, 그리고 이들을 활용해 강력한 React 애플리케이션을 구축하기 위한 몇 가지 모범 사례를 살펴볼 것이다.
커스텀 훅이란?
커스텀 훅은 여러 컴포넌트에서 재사용할 수 있는 상태 로직을 추출하고 재사용할 수 있게 해주는 방법이다.
자바스크립트 함수인데, 다른 훅들을 호출할 수 있고 여러 컴포넌트에서 공유할 로직을 캡슐화하는 용도로 쓰인다.
나의 생각:
컴포넌트가 재사용할 여지가 있는 요소 덩어리들을 나눠놓은 함수라고 하면, 커스텀 훅은 재사용할 로직들을 다루는 함수라고 이해했다.
자바스크립트에서 모듈화해놓은 로직을 필요할 때마다 꺼내 쓰는 느낌으로, 커스텀 훅도 자주 쓰이는 로직을 모듈화한 것이라고 생각한다.
커스텀 훅을 왜 사용해야 할까?
- 코드 재사용성: 커스텀 훅을 사용하면 로직을 여러 컴포넌트에서 재사용할 수 있어서 코드 중복을 줄일 수 있다.
- 더 깔끔한 컴포넌트: 복잡한 로직을 훅으로 분리하면 컴포넌트 코드가 더 깔끔해지고 UI에 집중할 수 있다.
- 관심사의 분리: 비즈니스 로직과 컴포넌트 로직을 분리해서 관리와 테스트가 더 용이해진다.
커스텀 훅 만들기
import { useState } from 'react';
function useCounter(initialValue = 0) {
const [count, setCount] = useState(initialValue);
const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);
const reset = () => setCount(initialValue);
return { count, increment, decrement, reset };
}
export default useCounter;커스텀 훅을 만드는 것은 어렵지 않다.
커스텀 훅을 만드는 목적을 생각하면, 방향성이 보이기 마련이다.
나의 생각:
state 변경 흐름 파악이 제 1 목적이라 생각한다. state 를 여기 저기서 써다가 변경하면, 어느 컴포넌트에서 변경이 이루어지는지 파악하기 쉽지 않다.
따라서, 보통의 커스텀 훅이라면 스테이트 정의를 할 것이고, 반복되는 로직을 컴포넌트로부터 분리하여
다른 컴포넌트에서는 간편하게 결과값만 이용할 수 있게 하는게 중요하다고 나는 생각한다.
import React from 'react';
import useCounter from './useCounter';
function CounterComponent() {
const { count, increment, decrement, reset } = useCounter(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
<button onClick={reset}>Reset</button>
</div>
);
}
export default CounterComponent;import 한 줄과 호출 한 줄, 달랑 두 줄만 추가해도 이제 복잡한 로직 없이 원하는 바를 수행할 수 있다.
React 컨텍스트 API란?
나의 생각:
컴포넌트의 구조를 깊게 짰다면, props 를 최상위 컴포넌트에서 최하위 컴포넌트까지 일일이 전달하는 경험은 누구나 해봤을 것이다.
심지어 전역에서 필요한 props 라면, 모든 컴포넌트에게 전달해야 하는 이 상황이 기분 좋지만은 않을 것이다.
React 컨텍스트 API는 javaScript 에서의 전역변수를 사용하는 것처럼, proprs 로 일일이 전달하지 않아도 어디서든지 내가 원하는 상태를 참조할 수 있게 해주는 기능이다.
컨텍스트는 컴포넌트 트리를 통해 데이터를 직접 전달할 수 있어서 prop drilling 문제를 해결하는 이점이 있다.
컨텍스트 API, 어디에 써먹을까?
- 글로벌 상태: 여러 컴포넌트에서 접근해야 하는 데이터가 있을 때.
- 테마: 애플리케이션 전체에 테마를 제공할 때.
- 사용자 인증: 사용자 인증 상태를 관리하고 제공할 때.
컨텍스트 생성 및 사용
컨텍스트를 생성하고 사용하는 방법은 다음과 같다:
- 컨텍스트 생성: React.createContext()를 사용해 컨텍스트 객체를 생성한다.
- 컨텍스트 제공: 컴포넌트 트리를 Provider 컴포넌트로 감싸고, 공유하고 싶은 값을 전달한다.
- 컨텍스트 사용: useContext 훅 또는 Context.Consumer를 사용해 컨텍스트 값을 컴포넌트에서 접근시킨다.
다음은 사용자 인증 상태를 관리하기 위해 React 컨텍스트를 사용하는 예시이다:
import React, { createContext, useContext, useState } from 'react';
const AuthContext = createContext();
function AuthProvider({ children }) {
const [user, setUser] = useState(null);
const login = (userInfo) => setUser(userInfo);
const logout = () => setUser(null);
return (
<AuthContext.Provider value={{ user, login, logout }}>
{children}
</AuthContext.Provider>
);
}
function UserProfile() {
const { user, logout } = useContext(AuthContext);
return (
<div>
{user ? (
<div>
<p>환영합니다, {user.name}</p>
<button onClick={logout}>로그아웃</button>
</div>
) : (
<p>로그인해 주세요</p>
)}
</div>
);
}
export default function App() {
return (
<AuthProvider>
<UserProfile />
</AuthProvider>
);
}컨텍스트 사용할 때, 이건 지켜줘요:
- 컨텍스트 단순하게 유지: 너무 많은 상태를 관리하는 큰 컨텍스트를 사용하지 말고, 더 작은 컨텍스트로 나눠 사용하는게 좋다.
- 컨텍스트 값 메모이제이션: useMemo를 사용해 불필요한 리렌더링을 방지한다.
- 커스텀 훅 범위 제한: 커스텀 훅이 너무 많은 일을 하지 않도록, 단일 로직이나 상태 관리를 집중해서 처리하도록 만드는게 좋다.
결론
커스텀 훅과 컨텍스트 API는 React에서 상태 관리를 효과적으로 할 수 있는 강력한 도구이다. 이 도구들을 잘 활용하면 더 유지 관리하기 쉽고, 재사용 가능하며, 깔끔한 React 애플리케이션을 만들 수 있다.
로컬 컴포넌트 상태를 관리할 때는 커스텀 훅을, 글로벌 상태를 공유할 때는 컨텍스트를 활용하면 된다.
Additional Resources
- 공식 문서
• React 공식 문서 - Hooks: 커스텀 훅을 포함한 React 훅의 개념과 사용법
• React 공식 문서 - Building Your Own Hooks: 커스텀 훅을 만드는 방법
• React 공식 문서 - Context: 컨텍스트 API의 개념과 사용법 - 블로그 포스트 및 튜토리얼
• LogRocket Blog - How to build custom hooks in React: 커스텀 훅을 만드는 방법과 다양한 예제
• Kent C. Dodds Blog - React Hooks: React 커뮤니티에서 유명한 Kent C. Dodds가 작성한 훅에 관한 블로그 포스트 모음
• LogRocket Blog - A deep dive into React Context API: 컨텍스트 API에 대한 심도 있는 분석과 예제
• Dave Ceddia Blog - How to Use the Context API in React: React 컨텍스트 API를 사용하는 방법 - YouTube 채널
• Academind: 다양한 React 관련 강좌를 제공하는 채널
• The Net Ninja: React의 다양한 주제에 대한 강좌를 제공하는 채널
