신비한 비

React 18에서 useContext()는 상태를 전역으로 관리하기 위해 사용되는 Hook 중 하나입니다. 이전에는 Redux와 같은 상태 관리 라이브러리를 사용하여 전역 상태를 관리해야 했지만, 이제 useContext()를 사용하여 전역 상태를 더 쉽게 관리할 수 있습니다.

useContext()를 사용하면 상위 컴포넌트에서 하위 컴포넌트로 전달할 필요없이 전역으로 상태를 관리할 수 있습니다. 이는 컴포넌트 트리 상의 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 특히 유용합니다.

다음은 useContext()를 사용하여 전역 상태를 관리하는 방법에 대한 예시 코드입니다.

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

export const ThemeContext = createContext('light');

// App.js
import { ThemeContext } from './ThemeContext';

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

// HomePage.js
import { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

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

  return (
    <div className={theme}>
      <h1>Welcome to My App</h1>
    </div>
  );
}

위의 예시 코드에서는 createContext()를 사용하여 ThemeContext를 생성합니다. createContext() 함수의 인수는 ThemeContext의 기본값을 설정합니다. App 컴포넌트에서는 ThemeContext.Provider를 사용하여 전체 앱의 테마를 "dark"로 설정합니다. HomePage 컴포넌트에서는 useContext()를 사용하여 ThemeContext의 값을 가져와서 해당 값으로 클래스 이름을 설정합니다.

이제, 어떤 컴포넌트에서든지 ThemeContext의 값을 가져와 사용할 수 있습니다. 만약 HomePage 컴포넌트가 중첩된 컴포넌트를 가지고 있다면, 해당 컴포넌트에서도 useContext()를 사용하여 ThemeContext의 값을 가져올 수 있습니다.

useContext()를 사용하면 컴포넌트 트리를 따라 상위 컴포넌트로 전달하는 것이 아니라, 컴포넌트 트리 상의 어떤 곳에서든지 값을 가져올 수 있습니다. 이를 통해 전역 상태를 더 쉽게 관리할 수 있습니다.

내저장소 바로가기 luxury515