React - Userdispatch Context

 

React - Context API(전역 값 관리)

이전 글에서 적어놓은 문제해결

- onToggle() 과  onRemove() 를 전역 값으로 관리

-> Context를 통해 할 수 있지만, 함수내에 dispatch부분만 따로 넘겨줄 수 있다.

 

- App.js -

1. 최상단에 createContext 호출

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

 

2. App() 컴포넌트 위에

export const UserDispatch = createContext(null);

function App() {

createContext() 에는 Provider 객체있음

 

3. 사용

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

 

- UserList.js -

User컴포넌트에서 바로 onToggle, onRemove 사용

1. UserList 컴포넌트에서 JSX, 파라미터에 있던 onToggle, onRemove 제거

User 컴포넌트의 파라미터에서도 제거

function UserList( { users }){


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

const User = React.memo(function User({ user }){
  const {username, email, id, active} = user;

 

 

2. 상단에 useContext, UserDispatch 호출

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

 

3.  User 컴포넌트에서 바로 dispatch 선언

const User = React.memo(function User({ user }){
  const {username, email, id, active} = user;
  const dispatch = useContext(UserDispatch); // 이 부분 추가

 

4. 나머지 부분 수정

const User = React.memo(function User({ user }){
  const {username, email, id, active} = user;
  const dispatch = useContext(UserDispatch);

  useEffect(() => {
    console.log(user);
    return () => {
      console.log('user 값이 바뀌기 전');
      console.log(user);
    }
  }, [user]);

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