[React] React에서 전역변수는 어떻게 쓸까?

React에서는 전역 상태를 관리하기 위해 일반적인 전역 변수를 사용하는 대신, 더 구조화된 방법을 사용하는 것이 좋습니다. 전역 상태 관리에는 주로 다음과 같은 도구와 패턴이 사용됩니다:

Context API와 useContext 훅
상태 관리 라이브러리 (예: Redux, MobX)
React Query (데이터 페칭 및 캐싱)
Local Storage나 Session Storage (브라우저의 저장소 사용)

각 접근 방식을 살펴보겠습니다.

1. Context API와 useContext 훅

React의 Context API는 전역 상태를 관리할 때 유용합니다. Context는 컴포넌트 트리 전체에서 데이터를 전달할 수 있게 해줍니다.

예제: 간단한 전역 상태 관리

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

// 컨텍스트 생성
const GlobalContext = createContext();

function App() {
  const [globalValue, setGlobalValue] = useState('Hello, World!');

  return (
    <GlobalContext.Provider value={{ globalValue, setGlobalValue }}>
      <ComponentA />
    </GlobalContext.Provider>
  );
}

function ComponentA() {
  return (
    <div>
      <ComponentB />
    </div>
  );
}

function ComponentB() {
  const { globalValue, setGlobalValue } = useContext(GlobalContext);

  return (
    <div>
      <p>{globalValue}</p>
      <button onClick={() => setGlobalValue('New Value!')}>Change Value</button>
    </div>
  );
}

export default App;

2. 상태 관리 라이브러리 (예: Redux, MobX)

Redux나 MobX 같은 상태 관리 라이브러리를 사용하면, 더 복잡한 전역 상태를 체계적으로 관리할 수 있습니다.

예제: Redux를 사용한 전역 상태 관리

# 필요한 패키지 설치
npm install redux react-redux

// store.js
import { createStore } from 'redux';

// 초기 상태
const initialState = {
  value: 'Hello, Redux!'
};

// 리듀서 함수
function reducer(state = initialState, action) {
  switch (action.type) {
    case 'SET_VALUE':
      return {
        ...state,
        value: action.payload
      };
    default:
      return state;
  }
}

// 스토어 생성
const store = createStore(reducer);

export default store;

// App.js
import React from 'react';
import { Provider, useSelector, useDispatch } from 'react-redux';
import store from './store';

function App() {
  return (
    <Provider store={store}>
      <ComponentA />
    </Provider>
  );
}

function ComponentA() {
  return (
    <div>
      <ComponentB />
    </div>
  );
}

function ComponentB() {
  const value = useSelector(state => state.value);
  const dispatch = useDispatch();

  const handleChange = () => {
    dispatch({ type: 'SET_VALUE', payload: 'New Redux Value!' });
  };

  return (
    <div>
      <p>{value}</p>
      <button onClick={handleChange}>Change Value</button>
    </div>
  );
}

export default App;

3. React Query

React Query는 서버 상태를 관리하고, 데이터 페칭, 캐싱, 동기화 등의 작업을 단순화합니다.

예제: React Query 사용

# 필요한 패키지 설치
npm install react-query

import React from 'react';
import { QueryClient, QueryClientProvider, useQuery } from 'react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ComponentA />
    </QueryClientProvider>
  );
}

function ComponentA() {
  return (
    <div>
      <ComponentB />
    </div>
  );
}

function ComponentB() {
  const { data, error, isLoading } = useQuery('fetchData', fetchData);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <p>Data: {data}</p>
    </div>
  );
}

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  return response.json();
}

export default App;

4. Local Storage나 Session Storage

Local Storage나 Session Storage를 사용하여 브라우저의 저장소에 데이터를 저장하고, 이를 통해 전역 상태를 유지할 수 있습니다.

예제: Local Storage 사용

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

function App() {
  const [value, setValue] = useState(localStorage.getItem('value') || 'Hello, Storage!');

  useEffect(() => {
    localStorage.setItem('value', value);
  }, [value]);

  return (
    <div>
      <p>{value}</p>
      <button onClick={() => setValue('New Storage Value!')}>Change Value</button>
    </div>
  );
}

export default App;

React에서는 전역 상태를 관리하기 위해 전역 변수를 직접 사용하기보다는, Context API, 상태 관리 라이브러리, React Query, 또는 브라우저 저장소 등을 사용하는 것이 일반적입니다. 이러한 도구들은 더 구조적이고 효율적인 상태 관리를 가능하게 하며, React의 컴포넌트 생명주기와 잘 통합됩니다.

개발