프로젝트 기초 공사 2

-이전에 정리한 글

https://shortcoding.tistory.com/194?category=1007874 

복잡한 상태 관리 로직 분리하기

이 글과 함께 보면 더 잘 이해가 될 것이다.

1. 상태 관리 세팅하기

-App.js

  const [data, dispatch] = useReducer(reducer, []);

복잡한 상태의 로직을 분리하기 위해서 useReducer를 사용한다.

2. 프로젝트 State Context 세팅하기

-App.js

const reducer = (state, action) => {
  let newState = [];
  switch (action.type) {
    case "INIT": {
      return action.data;
    }
    case "CREATE": {
      case "CREATE": {
      const newItem = {
        ...action.data,
      };
      newState = [newItem, ...state];
      break;
    }
    }
    case "REMOVE": {
      newState = state.filter((it) => it.id !== action.targetId);
      break;
    }
    case "EDIT": {
      newState = state.map((it) =>
        it.id === action.data.id ? { ...action.data } : it
      );
      break;
    }
    default:
      return state;
  }
  return newState;
};

그리고 reducer 함수를 만들었다. INIT, CREATE, REMOVE, EDIT으로 나눠서 만들었다.

CREATE는 데이터 추가, REMOVE는 데이터 삭제, EDIT는 데이터 수정이다.

3. 프로젝트 Dispatch Contect 세팅하기

// 데이터의 id로 사용
  const dataId = useRef(0);
  // CREATE
  const onCreate = (data, content, emotion) => {
    dispatch({
      type: "CREATE",
      data: {
        id: dataId.current,
        date: new Date(date).getTime(),
        content,
        emotion,
      },
    });
    dataId.current += 1;
  };
  // REMOVE
  const onRemove = (targetId) => {
    dispatch({ type: "REMOVE", targetId });
  };
  // EDIT
  const onEdit = (targetId, date, content, emotion) => {
    dispatch({
      type: "EDIT",
      data: {
        id: targetId,
        date: new Date(date).getTime(),
        content,
        emotion,
      },
    });
  };

dispatch가 호출되면 type 객체를 reducer에게 전달하게되고 reducer가 상태변화를 처리한다.

dataID는 useRef를 이용해서 만들어서 일기의 id로 사용한다.

onCreate는 데이터를 추가해야 해서 data 객체 안에 id, date, content, emotion을 담아서 전달한다. 그리고 다음에 추가될 일기를 위해서  dataId에 1을 더해준다.

onRemove는 targetId만 전달해주면 된다.

onEdit은 dataId 제외하고 다 수정해줘야 하기 때문에 onCreate 처럼 data 객체에 모아서 전달해준다.

 

export const DiaryStateContext = Reate.createContext();

그리고 export 해준다.

 

    <DiaryStateContext.Provider value={data}>
      <BrowserRouter>
        <div className="App">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/new" element={<New />} />
            <Route path="/edit" element={<Edit />} />
            <Route path="/diary" element={<Diary />} />
          </Routes>
        </div>
      </BrowserRouter>
    </DiaryStateContext.Provider>

DiaryStateContext.Provider로 감싸주면된다. 그리고 value를 이용해서 data 객체도 같이 전달한다.

 

개발자 도구에서 보면 Context.Provider가 전체를 감싸고 있다.

 

-dispatch 함수들도 Contect를 생성해서 공급하기

export const DiaryDispatchContext = React.createContext();

우선 새로운 Contect를 만들어준다.

 

<DiaryStateContext.Provider value={data}>
      <DiaryDispatchContext.Provider value={{ onCreate, onEdit, onRemove }}>
        <BrowserRouter>
          <div className="App">
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/new" element={<New />} />
              <Route path="/edit" element={<Edit />} />
              <Route path="/diary" element={<Diary />} />
            </Routes>
          </div>
        </BrowserRouter>
      </DiaryDispatchContext.Provider>
    </DiaryStateContext.Provider>

그리고 DiaryDispatchContext.Provider를 만들고 value로 onCreate, onEdit, onRemove를 전달해준다.

하지만 이 코드는 아직 최적화되지는 않은 상태이다.