useContext: 반응 후크

두 개의 실용적인 미니 프로젝트를 사용한 React의 useContext

소개

React에서는 구성요소 간 데이터 관리가 필수적이며, 특히 여러 구성요소가 동일한 데이터에 액세스해야 하는 대규모 애플리케이션에서는 더욱 그렇습니다. Prop 드릴링(구성 요소 트리의 여러 수준으로 Prop을 전달하는 것)은 금방 번거로워질 수 있습니다. 이것이 React의 useContext 후크가 빛나는 곳입니다. useContext를 사용하면 props를 수동으로 전달하지 않고도 구성 요소 간에 데이터를 공유할 수 있으므로 상태 관리를 위한 귀중한 도구가 됩니다.

이 글에서는 useContext, 구문, 이점에 대한 자세한 설명부터 시작하겠습니다. 그런 다음 두 개의 미니 프로젝트를 구축하여 이러한 이해를 더욱 공고히 하겠습니다.

1. 테마 전환기: useContext가 전역 상태를 관리하는 방법을 보여주는 간단한 테마 전환기
2. 사용자 인증 상태: 사용자 로그인 상태를 처리하는 앱으로, 실제 사용 사례에 대해 useContext를 사용하는 방법을 보여줍니다.

이 튜토리얼이 끝나면 모든 React 프로젝트에서 useContext를 자신있게 사용할 수 있는 준비를 갖추게 될 것입니다.

---

useContext란 무엇입니까?

useContext의 기본

useContext는 구성요소가 컨텍스트를 직접 구독할 수 있게 해주는 React 후크입니다. 구성 요소가 구성 요소 트리에서 가장 가까운 공급자의 글로벌 데이터에 액세스할 수 있도록 하여 번거로운 소품 드릴링을 방지하는 데 도움이 됩니다.

useContext의 구문

컨텍스트를 생성하고 사용하기 위한 기본 구문은 다음과 같습니다.

import React, { useContext, createContext } from 'react';

const MyContext = createContext(defaultValue); // Step 1: Create a context

function MyComponent() {
    const contextValue = useContext(MyContext); // Step 2: Use the context
    return <div>{contextValue}</div>;
}

설명

1. 컨텍스트 생성: createContext는 공유하려는 데이터를 보유하는 컨텍스트 객체를 초기화합니다. defaultValue 매개변수는 선택사항이지만 공급자를 찾을 수 없는 경우 대체 수단으로 사용할 수 있습니다.
2. useContext와 함께 컨텍스트 사용: 구성 요소 내에서 useContext(MyContext)를 사용하여 컨텍스트의 현재 값에 액세스합니다. 이 값은 가장 가까운 구성 요소 트리의 구성 요소 위에 있습니다.

컨텍스트 제공자와 소비자의 예

import React, { useContext, createContext } from 'react';

const ThemeContext = createContext('light'); // default theme is light

function ThemeProvider({ children }) {
    return <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>;
}

function DisplayTheme() {
    const theme = useContext(ThemeContext); // Consuming the context
    return <p>The current theme is {theme}</p>;
}

function App() {
    return (
        <ThemeProvider>
            <DisplayTheme />
        </ThemeProvider>
    );
}

이 예에서는:

• ThemeContext는 컨텍스트이며 기본값 'light'로 초기화됩니다.
• ThemeProvider는 DisplayTheme을 래핑하고 value="dark"를 제공하여 ThemeProvider 내의 현재 테마를 'dark'로 만듭니다.
• DisplayTheme 구성 요소는 useContext(ThemeContext)를 사용하여 테마에 액세스하고 렌더링합니다.

여기에서는 기본 사항을 다룹니다. 이제 이 지식을 실제 시나리오에 적용하기 위한 프로젝트를 살펴보겠습니다.

---

미니 프로젝트 1: 테마 전환기 구축

첫 번째 프로젝트는 useContext를 사용하여 테마의 전역 애플리케이션 상태를 관리하는 방법을 보여주는 간단한 테마 전환기입니다.

1단계: 컨텍스트 설정

import React, { useContext, createContext } from 'react';

const MyContext = createContext(defaultValue); // Step 1: Create a context

function MyComponent() {
    const contextValue = useContext(MyContext); // Step 2: Use the context
    return <div>{contextValue}</div>;
}

여기에서 ThemeContext는 현재 테마와 이를 전환하는 기능이라는 두 가지 값을 제공합니다. 공급자는 앱 구성 요소를 래핑하여 테마와 토글 기능을 전역적으로 사용할 수 있도록 합니다.

2단계: 구성 요소에서 컨텍스트 사용

import React, { useContext, createContext } from 'react';

const ThemeContext = createContext('light'); // default theme is light

function ThemeProvider({ children }) {
    return <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>;
}

function DisplayTheme() {
    const theme = useContext(ThemeContext); // Consuming the context
    return <p>The current theme is {theme}</p>;
}

function App() {
    return (
        <ThemeProvider>
            <DisplayTheme />
        </ThemeProvider>
    );
}

3단계: 기본 앱에서 공급자 사용

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
    const [theme, setTheme] = useState('light');
    const toggleTheme = () => setTheme(theme === 'light' ? 'dark' : 'light');

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

이제 버튼을 클릭하여 밝은 테마와 어두운 테마 사이를 전환할 수 있으며 테마 상태도 함께 표시됩니다. 이 프로젝트는 useContext를 통해 여러 구성요소가 전역 상태 변경을 공유하고 이에 반응할 수 있는 방법을 보여줍니다.

---

미니 프로젝트 2: 사용자 인증 관리

두 번째 프로젝트에서는 useContext를 사용하여 사용자의 인증 상태를 추적하는 간단한 앱을 만들어 보겠습니다.

1단계: 인증 컨텍스트 생성

function ThemeToggler() {
    const { theme, toggleTheme } = useContext(ThemeContext); // Access context values
    return (
        <button onClick={toggleTheme}>
            Switch to {theme === 'light' ? 'dark' : 'light'} mode
        </button>
    );
}

function DisplayTheme() {
    const { theme } = useContext(ThemeContext);
    return <p>Current Theme: {theme}</p>;
}

2단계: 로그인 및 로그아웃 구성 요소 생성

function App() {
    return (
        <ThemeProvider>
            <DisplayTheme />
            <ThemeToggler />
        </ThemeProvider>
    );
}

export default App;

3단계: 사용자 상태 표시

import React, { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export function AuthProvider({ children }) {
    const [isAuthenticated, setIsAuthenticated] = useState(false);

    const login = () => setIsAuthenticated(true);
    const logout = () => setIsAuthenticated(false);

    return (
        <AuthContext.Provider value={{ isAuthenticated, login, logout }}>
            {children}
        </AuthContext.Provider>
    );
}

4단계: 앱에서 구성 요소 결합

function LoginButton() {
    const { login } = useContext(AuthContext); // Access login function
    return <button onClick={login}>Login</button>;
}

function LogoutButton() {
    const { logout } = useContext(AuthContext); // Access logout function
    return <button onClick={logout}>Logout</button>;
}

이제 로그인 및 로그아웃 버튼이 앱 전체에서 사용자 상태를 업데이트하는 간단한 인증 상태 앱이 생겼습니다. 이 프로젝트는 useContext가 실제 시나리오에서 애플리케이션 전체의 상태를 처리하는 방법을 보여줍니다.

---

결론

이 두 프로젝트를 통해 useContext가 소품 드릴링 없이 구성 요소 간 데이터 공유를 단순화하는 방법을 확인했습니다. 테마 전환기 및 인증 상태 프로젝트는 전역 상태를 효과적으로 관리하는 데 실용적인 통찰력을 제공합니다. 테마를 전환하든 사용자 인증을 처리하든 useContext는 효율적이고 체계적인 애플리케이션을 구축할 수 있는 강력한 도구를 제공합니다.

위 내용은 useContext: 반응 후크의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!