안녕하세요 질문있습니다.

안녕하세요 이정환입니다.

우선 Edit이 작동하지 않는 문제부터 설명드릴게요

현철님이 작성하신 src/App.js의 reducer 함수의 'EDIT' case는 다음과 같이 작성되어 있습니다.

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

그리고 이 'EDIT'을 호출하는 App 컴포넌트의 onEdit 함수는 다음과 같이 작성되어 있습니다.

function App () {
  ...
  const onEdit = (targetId, date, content, emotion) => {
    dispatch({
      type: "EDIT",
      data: {
        id: targetId,
        date: new Date(date).getTime(),
        content,
        emotion
      }
    });
  };
  ...
}

문제는 여기서 발생합니다. onEdit 함수에서 dispatch를 호출 할 때 인수로 전달하는 액션 객체에는 수정 대상 일기 아이템의 id를 뜻하는 targetId 프로퍼티가 없습니다. 대신 수정할 일기 id를 data.id로 담아서 전달했습니다.

그러므로 src/App.js의 reducer 함수를 다음과 같이 수정하셔야 정상적으로 작동합니다.

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

정리하면 action.targetId가 아닌 action.data.id로 작성하셔야 정상적으로 작동합니다.

두번째 질문 console.log(targetDate) 가 두번 호출되는 문제의 원인은 확실히 확인하기는 어렵지만 (보내주신 codeSandBox의 코드에는 이 콘솔 명령문이 없습니다 ㅠㅜ)

아마 index.js의 <React.StrictMode>를 제거하면 한번만 호출 될 것으로 예상됩니다.

src/index.js를 다음과 같이 수정해주세요

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(
  document.getElementById("root")
);
root.render(<App />);

감사합니다.

인프런 커뮤니티 질문&답변