useReducer 사용법 문제풀이.

#1 지시사항

1. App.js에서 initial 상수에 초기값을 완성해주세요.
   • top: apple
   • middle: banana
   • bottom: coconut
2. 다음 사항에 맞추어 **reducer**를 작성해주세요. 서로 바꿀 수 있는 기능을 제공하도록 합니다.
   • top-middle-change: top ↔ middle
   • middle-bottom-change: middle ↔ bottom
   • top-bottom-change: top ↔ bottom
   • top-update: 이전 ↔ action.payload
   • middle-update: 이전 ↔ action.payload
   • bottom-update: 이전 ↔ action.payload
3. **useReducer**를 사용해 state, **dispatch**를 **value**에 넣어서 **Provider**에 전달해주세요.
4. B.jsx에서 **Context**로 부터 **dispatch**를 받아서 **button**에 action 객체를 전달해주세요.
   • **payload**에는 **useRef**로 **input**에 입력된 텍스트 값을 전달합니다.

// App.jsx

import React, { createContext, useReducer } from 'react';
import ContainerA from './components/A';
import './App.css';

export const MyContext = createContext(null);

/*
  다음 초기값을 완성해주세요.
*/
const initial = {
  top: 'apple',
  middle: 'banana',
  bottom: 'coconut',
};

/*
  상태 변경 설명서라 할 수 있는 reducer를 지시사항에 맞게 작성해주세요.
*/
function reducer(state, action) {
  switch (action.type) {
    case 'top-middle-change':
      return {
        ...state,
        top: state.middle,
        middle: state.top,
      };
    case 'middle-bottom-change':
      return {
        ...state,
        middle: state.bottom,
        bottom: state.middle,
      };
    case 'top-bottom-change':
      return {
        ...state,
        top: state.bottom,
        bottom: state.top,
      };
    case 'top-update':
      return {
        ...state,
        top: action.payload,
      };
    case 'middle-update':
      return {
        ...state,
        middle: action.payload,
      };
    case 'bottom-update':
      return {
        ...state,
        bottom: action.payload,
      };
    default:
      throw new Error();
  }
}

export default function App() {
  // useReducer를 사용해 state와 dispatch를 value 넣어서 전달해주세요.
  //데이터를 보내주기위한 작업. state는 상태값 데이터값 이라고생각하면되고. useReducer로 보냄.
  // initial이 위쪽에 정해진 데이터 저장소 
  // reducer은 조종하는곳. 컨트롤룸 느낌.
  // dispatch 는 갱신하기 위한 조이스틱 느낌
  const [state, dispatch] = useReducer(reducer, initial);
  const value = {
    state,
    dispatch,
  };

  return (
    <div className="layout">
      <MyContext.Provider value={value}>
        <ContainerA />
      </MyContext.Provider>
    </div>
  );
}

 

B.jsx

// B.jsx

import ContainerC from './C';
import ContainerD from './D';
import ContainerE from './E';
import { useContext, useRef } from 'react';
import { MyContext } from '../App';

export default function ContainerB() {
  // Context로 부터 dispatch를 받습니다.
  const { state, dispatch } = useContext(MyContext);

  const inputRef = useRef();

  return (
    <div>
      <div className="container b">
        <div className="title">Component B</div>
        <div className="content">
          <ContainerC />
          <ContainerD />
          <ContainerE />
          <div className="button-group">
            <button
              onClick={() => {
                // 올바른 액션 타입을 지정해주세요.
                dispatch({ type: 'top-middle-change' });
              }}
            >
              Top Middle Change
            </button>
            <button
              onClick={() => {
                // 올바른 액션 타입을 지정해주세요.
                dispatch({ type: 'middle-bottom-change' });
              }}
            >
              Middle Bottom Change
            </button>
            <button
              onClick={() => {
                // 올바른 액션 타입을 지정해주세요.
                dispatch({ type: 'top-bottom-change' });
              }}
            >
              Top Bottom Change
            </button>
          </div>
          <div className="button-group">
            <input type="text" data-testid="input" ref={inputRef} />
            <button
              onClick={() => {
                // 올바른 액션 타입과 페이로드를 전달해주세요.
                dispatch({
                  type: 'top-update',
                  payload: inputRef.current.value,
                });
              }}
            >
              Top Update
            </button>
            <button
              onClick={() => {
                // 올바른 액션 타입과 페이로드를 전달해주세요.
                dispatch({
                  type: 'middle-update',
                  payload: inputRef.current.value,
                });
              }}
            >
              Middle Update
            </button>
            <button
              onClick={() => {
                // 올바른 액션 타입과 페이로드를 전달해주세요.
                dispatch({
                  type: 'bottom-update',
                  payload: inputRef.current.value,
                });
              }}
            >
              Bottom Update
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

 

useRef() 를 이용한 인풋값을 

inputRef.current.value 를 payload로 보내서 등록한다는 개념.

payload는 데이저 저장소의 느낌으로 생각하면된다. 갱신?느낌