https://nakta.dev/how-to-manage-modals-1

https://react.vlpt.us/basic/22-context-dispatch.html

개요

종종 자식 컴포넌트의 자식 컴포넌트의 자식 컴포넌트의... 같은 형태로 변수나 함수를 계속해서 거쳐서 전달을 하게 되는 일이 생긴다.

Context API를 사용하면 이런 복잡한 구조를 없애줄 수 있다.

리액트의 Context API 를 사용하면, 프로젝트 안에서 전역적으로 사용 할 수 있는 값을 관리 할 수 있다. 이 값은 상태가 아닌 함수일수도 있고, 어떤 외부 라이브러리 인스턴스일수도 있고 심지어 DOM일 수도 있다.

Context API

Context 선언

const UserDispatch = React.createContext(null);

React.createContext라는 함수를 사용해서 Context를 만들 수 있다.

createContext에는 Context의 기본값을 설정할 수 있는데, 값을 따로 지정하지 않을 경우 사용되는 기본 값이다.

Context 사용

Context 를 만들면, Context 안에 Provider 라는 컴포넌트가 들어있는데 이 컴포넌트를 통하여 Context 의 값을 정할 수 있다. 이 컴포넌트를 사용할 때, 속성으로 value 라는 값을 설정해주면 된다.

<UserDispatch.Provider value={dispatch}>...</UserDispatch.Provider>

Provider 에 의하여 감싸진 컴포넌트라면 어디서든 Context의 value로 설정한 값을 사용할 수 있다. Reducer와 같이 사용한다고 했을 때 dispatch, state처럼 계속 보내줘야 하는 값을 넣어주는 등 유용하게 사용할 수 있을 것이다.

import React, { useRef, useReducer, useMemo, useCallback } from 'react';
import UserList from './UserList';
import CreateUser from './CreateUser';
import useInputs from './hooks/useInputs';

function countActiveUsers(users) {
  console.log('활성 사용자 수를 세는중...');
  return users.filter(user => user.active).length;
}

const initialState = {
  users: [
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com',
      active: true
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com',
      active: false
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com',
      active: false
    }
  ]
};

function reducer(state, action) {
  switch (action.type) {
    case 'CREATE_USER':
      return {
        users: state.users.concat(action.user)
      };
    case 'TOGGLE_USER':
      return {
        ...state,
        users: state.users.map(user =>
          user.id === action.id ? { ...user, active: !user.active } : user
        )
      };
    case 'REMOVE_USER':
      return {
        ...state,
        users: state.users.filter(user => user.id !== action.id)
      };
    default:
      return state;
  }
}

// UserDispatch 라는 이름으로 내보내줍니다.
export const UserDispatch = React.createContext(null);

function App() {
  const [{ username, email }, onChange, onReset] = useInputs({
    username: '',
    email: ''
  });
  const [state, dispatch] = useReducer(reducer, initialState);
  const nextId = useRef(4);

  const { users } = state;

  const onCreate = useCallback(() => {
    dispatch({
      type: 'CREATE_USER',
      user: {
        id: nextId.current,
        username,
        email
      }
    });
    onReset();
    nextId.current += 1;
  }, [username, email, onReset]);

  const onToggle = useCallback(id => {
    dispatch({
      type: 'TOGGLE_USER',
      id
    });
  }, []);

  const onRemove = useCallback(id => {
    dispatch({
      type: 'REMOVE_USER',
      id
    });
  }, []);

  const count = useMemo(() => countActiveUsers(users), [users]);
  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>
  );
}

export default App;

createContext에는 Context의 기본값을 설정할 수 있는데, 값을 따로 지정하지 않을 경우 사용되는 기본 값이다.

UserDispatch 라는 Context 를 만들고 value에 dispatch를 집어넣음으로써, 어디서든지 dispatch 를 꺼내 쓸 수 있도록 준비해주었다.

export const UserDispatch = React.createContext(null);

선언과 동시에 이렇게 내보내주고 다른 컴포넌트에서 사용하게 될 때에는 아래처럼 불러와서 사용할 수 있다.

import { UserDispatch } from './App';

자식 컴포넌트에서 Context API를 사용할 때는 다음과 같이 사용한다.

import React, { useContext } from 'react';
import { UserDispatch } from './App';

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

  return (
    <div>
      <b
        style={{
          cursor: 'pointer',
          color: user.active ? 'green' : 'black'
        }}
        onClick={() => {
          dispatch({ type: 'TOGGLE_USER', id: user.id });
        }}
      >
        {user.username}
      </b>
      &nbsp;
      <span>({user.email})</span>
      <button
        onClick={() => {
          dispatch({ type: 'REMOVE_USER', id: user.id });
        }}
      >
        삭제
      </button>
    </div>
  );
});

function UserList({ users }) {
  return (
    <div>
      {users.map(user => (
        <User user={user} key={user.id} />
      ))}
    </div>
  );
}

export default React.memo(UserList);