기존 mock data는 그룹이 따로 만들어지는데 뭔가 잘못된 건... - 인프런

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

12.9) 일기 관리 기능 구현하기 2

기존 mock data는 그룹이 따로 만들어지는데 뭔가 잘못된 건가요?

해결된 질문

작성

이게 제 console인데요
아래 mock data는 자기들끼리 따로 그룹지어서 나오는데 선생님 콘솔에는 그냥 다 개별로 나오거든요...

뭐가 문제일까요?


import { useReducer, useRef } from "react";

const mockData = [
  {
    id: 1,
    createDate: new Date().getTime(),
    emotionId: 1,
    content: "1번 일기 내용",
  },
  {
    id: 2,
    createDate: new Date().getTime(),
    emotionId: 2,
    content: "2번 일기 내용",
  },
];

function reducer(state, action) {
  switch (action.type) {
    case "CREATE":
      return [action.data, ...state];
  }
}

function App() {
  const [data, dispatch] = useReducer(reducer, [mockData]);
  const idRef = useRef(3);

  const onCreate = (createDate, emotionId, content) => {
    dispatch({
      type: "CREATE",
      data: {
        id: idRef.current++,
        createDate,
        emotionId,
        content,
      },
    });
  };

  return (
    <>
      <button
        onClick={() => {
          onCreate(new Date().getTime(), 1, "Hello");
        }}>
        일기 추가 테스트
      </button>
    </>
  );
}

export default App;

제 코드도 첨부해봅니다,,,

javascript react node.js

답변 2

이정환 Winterlood

지식공유자

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

useState로 data State 생성하는 부분이 강의와 코드가 다르네요

현재는 초기값을 [mockData] 라고 설정하고 계시지만, 아래 예제처럼 mockData 변수 자체를 넣어주셔야 합니다.

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

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. green님.

상황을 살펴보니, useReducer의 초기 상태를 설정하는 부분에서 문제가 발생한 것 같습니다. useReducer의 초기 상태로 mockData를 배열로 한번 더 감싸서 주어야 하는데, 현재 코드를 보면 불필요하게 중첩된 배열로 초기 상태를 선언하셨습니다. 이로 인해 mockData가 하나의 그룹으로 묶여 출력되고 있습니다.

여기서 사용하신 useReducer의 초기 상태 부분을 다음처럼 수정해 보세요:

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

이렇게 수정하시면 mockData는 data 배열 안에 개별적으로 들어가게 되어, 각 항목이 개별적으로 표시될 것입니다.

관련하여 데이터 저장 및 불러오기와 관련된 이슈를 다룬 질문들이 있습니다. 다음 질문 링크가 도움이 될 수 있습니다: 데이터추가하기에서 못넘어가고 있어요….ㅡㅡ

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

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

기존 mock data는 그룹이 따로 만들어지는데 뭔가 잘못된 건가요?