리액트 -UserDispatch Context 만들기

전에 실습한 Context API를 이제 App.js에 적용시켜보자.

onToggle과 onRemove를 UserList컴포넌트를 거치지 않고 직접 User컴포넌트에 전달하는 것이 목표이다.

ContextAPI를 이용해서 dispatch만 따로 넣어줄 것이다.

App 컴퍼넌트 위에 createContext를 선언한다.

export const UserDispatch = createContext(null);

그다음 App 컴퍼넌트의 return 값을 UserDispatch.Provider로 덮어준다. 이때 value는 dispatch로 지정한다.

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

App 에서 직접 User컴포넌트로 dispatch를 전송하므로 App 에 작성된 dispatch는 이제 필요없다.

onToggle과 onRemove를 User 컴포넌트 안에서 직접 만들 것이다.
1. App.js에서 만든 Context를 가져와서 사용하는 useContext를 생성한다.

const dispatch = useContext(UserDispatch);

2. onToggle과 onRemove를 호출하는 onClick을 수정한다.

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

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

App.js의 dispatch 항목을 제거해서 그대로 User 컴포넌트의 onClick 자체에 넣어주는 것이다.