[React] Day 24 - Context API를 사용한 전역 값 관리

📢우리가 지금까지 만들고있는 프로젝트를 보면, APP 컴포넌트에서 onToggle, onRemove 등의 함수가 구현되어있고, 이 함수들은 UserList 컴포넌트를 거쳐서 각 User 컴포넌트에 전달되고 있다.

  -> 여기서 UserList 컴포넌트의 경우는 함수들을 전달하기 위한 중간다리 역할만 하고 있다. 즉, UserList에서는 함수들을 직접적으로 사용하고 있지 않다.

 

📌현재로써는 큰 불편함이 없지만, 만약 3~4개의 컴포넌트를 거쳐서 전달을 해야하는 일이 생긴다면 매우 번거로워질 것이다. 

   -> 그럴땐, 리액트의 Context API와 이전에 배웠던 dispatch를 함께 사용한다면 이러한 복잡한 구조를 해결 할 수 있다.

 

📌Context API를 사용해서 새로운 Context 만들기

const UserDispatch = React.createContext(null);

createContext의 파라미터 : Context의 기본값 설정

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

value 값 : Provider 컴포넌트를 통한 Context의 값 정하기

 

➡️APP 컴포넌트에서 Context를 만들고, 사용하고, 내보내기

 

APP.js 변경

import React, { useRef, useReducer, useMemo, useCallback } from 'react';

import UserList from './qoffhvjxm/UserList';

import CreateUser from './qoffhvjxm/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 라는 이름으로 내보내주기

// 기본값은 NULL으로 지정

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;

 

➡️이제 우리는 UserDispatch라는 Context를 만들어서, 어디서든지 dispatch를 꺼내 쓸 수 있다.

그러므로, 이제 APP에서 onToggle와 onRemove를 지우고, UserList에게 props를 전달하는 것도 지운다.

 

APP.js 변경

import React, { useRef, useReducer, useMemo, useCallback } from 'react';

import UserList from './qoffhvjxm/UserList';

import CreateUser from './qoffhvjxm/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 count = useMemo(() => countActiveUsers(users), [users]);

  return (

    <UserDispatch.Provider value={dispatch}>

      <CreateUser

        username={username}

        email={email}

        onChange={onChange}

        onCreate={onCreate}

      />

      <UserList users={users} />

      <div>활성사용자 수 : {count}</div>

    </UserDispatch.Provider>

  );

}

export default App;

 

➡️UserList에서도 onToggle와 onRemove에 대한 코드를 지워준다.

 

UserList.js 변경

import React from 'react';

const User = React.memo(function User({ user }) {

  return (

    <div>

      <b

        style={{

          cursor: 'pointer',

          color: user.active ? 'green' : 'black'

        }}

        onClick={() => {}}

      >

        {user.username}

      </b>

      &nbsp;

      <span>({user.email})</span>

      <button onClick={() => {}}>삭제</button>

    </div>

  );

});

function UserList({ users }) {

  return (

    <div>

      {users.map(user => (

        <User user={user} key={user.id} />

      ))}

    </div>

  );

}

export default React.memo(UserList);

 

➡️User 컴포넌트에서 바로 dispatch를 사용하기 위한 useContext라는 Hook를 사용해서 UserDispatch Context를 조회해야한다.

 

UserList.js 변경

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);