React.js | 입문 | Context API 전역 값 관리(2)

전 글에서 설명할 때 

 

1. 상위 컴포넌트에서 내보내고,

export const UserDispatch = React.createContext(null);

 

 

 

2. 감싸고,

  return (
    <UserDispatch.Provider value={dispatch}>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} onToggle={onToggle} onRemove={onRemove} />
      <div>활성사용자 수 : {count}</div>
    </UserDispatch.Provider>
  );

 

 

 

 

3. 하위 컴포넌트에서 import 하고,

import { UserDispatch } from './App';

 

 

4. 하위 컴포넌트에서 useContext로 가져왔다.

const User = React.memo(function User({ user }) {
  const dispatch = useContext(UserDispatch);

 

 

 

 

이 방법이 잘못된건 아니지만, 다른 방법도 있어서 설명하겠다.

 

const TodoStateContext = createContext();
const TodoDispatchContext = createContext();

export function TodoProvider({ children }) {
  const [state, dispatch] = useReducer(todoReducer, initialTodos);
  return (
    <TodoStateContext.Provider value={state}>
      <TodoDispatchContext.Provider value={dispatch}>
        {children}
      </TodoDispatchContext.Provider>
    </TodoStateContext.Provider>
  );
}

export function useTodoState() {
  return useContext(TodoStateContext);
}

export function useTodoDispatch() {
  return useContext(TodoDispatchContext);
}

먼저 상위 컴포넌트에서 위 코드가 같이 선언해준다.

 

 

 

1. 먼저 state 와 dispatch가 담길 Context를 선언해준다.

const TodoStateContext = createContext();
const TodoDispatchContext = createContext();

 

 

2. 그 다음 다른 컴포넌트에서 import 할 함수들을 정의한다.

export function useTodoState() {
  return useContext(TodoStateContext);
}

export function useTodoDispatch() {
  return useContext(TodoDispatchContext);
}

 

 

3. 그 다음 Context를 사용 할 하위 컴포넌트들을 감싼다

export function TodoProvider({ children }) {
  const [state, dispatch] = useReducer(todoReducer, initialTodos);
  return (
    <TodoStateContext.Provider value={state}>
      <TodoDispatchContext.Provider value={dispatch}>
        {children}
      </TodoDispatchContext.Provider>
    </TodoStateContext.Provider>
  );
}

 

 

4. 그 다음 하위 컴포넌트에서 import하여 사용한다.

import React from 'react';
import { useTodoState, useTodoDispatch } from '../TodoContext';

function Sample() {
  const state = useTodoState();
  const dispatch = useTodoDispatch();
  return <div>Sample</div>;
}

 

 

차이점은

- useContext를 하위컴포넌트에서 사용하냐, 

- useContext를 상위컴포넌트에서 사용하여 Context가 return되는 함수를 정의하고 하위 컴포넌트에서 이 함수를 하위

   컴포넌트에서 사용하냐 이다.

 

사용하기 나름이라 편한걸로 쓰면 될 것 같다.