혼자 이것저것 공부해보는/감정 일기장

[감정 일기장] New 페이지 구현하기 2. 기능

silver님 2025. 2. 10. 00:56

🌟 New 페이지 구현하기 2. 기능 🌟

New 페이지에서 핵심 기능들을 구현했다.
특히 뒤로 가기 방지, 상태 관리, 작성 완료 후 페이지 이동 등을 처리하는 방법에 대해 기록한다. ✍️

🔙 1. 뒤로 가기 기능 구현

사용자가 이전 페이지로 이동할 수 있도록 뒤로 가기 버튼을 추가했다.
이때 useNavigate를 활용해서 간단하게 구현했다.

leftChild={<Button onClick={() => nav(-1)} text={"< 뒤로 가기"}/>}

이렇게 하면 뒤로 가기 버튼을 클릭했을 때 이전 페이지로 이동할 수 있다.
하지만 단순히 뒤로 가기만 구현하면 홈페이지에서 다시 뒤로 가기를 눌렀을 때 New 페이지로 돌아오는 문제가 발생한다. 🤦‍♂️
이를 해결하기 위해 replace 옵션을 활용했다.

📝 2. 날짜 상태 관리

New 페이지에서 사용자가 선택한 날짜 값을 저장해야 했다.
useState를 사용하여 날짜를 상태로 관리했는데, 이 부분이 꽤 까다로웠다. 🤔

const [input, setInput] = useState({
  createdDate: new Date(),
  emotionId: 3,
  content: "",
});

이 상태를 변경할 때, 날짜 값이 문자열이 아니라 Date 객체로 변환되어야 한다는 점을 주의해야 했다.
날짜를 변경하면 다음과 같이 변환했다.

if (name === "createdDate") {
  value = new Date(value);
}
setInput({
  ...input,
  [name]: value,
});

이렇게 하면 사용자가 날짜를 선택했을 때 올바른 형식으로 상태가 업데이트된다. ✅

😊 3. 오늘의 감정 선택 기능

사용자가 감정을 선택할 수 있도록 버튼을 추가하고, 선택된 감정이 강조되도록 했다.
이때 emotionId를 상태로 관리하고, 감정 버튼을 클릭하면 상태가 변경되도록 구현했다.

<EmotionItem
  onClick={() => onChangeInput({
    target: { name: "emotionId", value: item.emotionId }
  })}
  key={item.emotionId}
  {...item} 
  isSelected={item.emotionId === input.emotionId} 
/>

선택된 감정은 isSelected 값을 활용해 하이라이트 효과를 주었다.

💾 4. 작성 완료 기능

사용자가 입력한 데이터를 저장하고 홈으로 이동하는 기능을 구현했다.
작성 완료 버튼을 누르면 입력된 데이터를 기반으로 새로운 일기 데이터를 저장해야 했다.

const onSubmit = (input) => {
  onCreate(
    input.createdDate.getTime(), 
    input.emotionId, 
    input.content
  );
  nav('/', { replace: true });
};

 

replace: true 옵션을 추가하여 뒤로 가기 방지도 함께 처리했다.
이렇게 하면 사용자가 작성 완료 후 홈페이지로 이동한 뒤, 뒤로 가기를 눌러도 New 페이지로 돌아오지 않도록 할 수 있다. 🔒

❌ 5. 취소하기 버튼 구현

취소하기 버튼을 클릭하면 아무것도 저장하지 않고 이전 페이지로 돌아가도록 처리했다.

<Button onClick={() => nav(-1)} text={"취소하기"} />

이제 사용자가 실수로 작성하다가 취소해도 문제가 없다. 🎉

🛠️ 6. 일기 추가가 되지 않는 오류 해결 과정

🚨 오류 발생 상황

  • 개발자 도구에서는 onSubmit이 실행되었고, 데이터도 추가된 것으로 보였지만 홈 화면에서는 일기가 추가되지 않는 문제가 발생함.
  • Editor 컴포넌트에서 onSubmit을 실행했지만, 전달된 데이터가 올바르게 반영되지 않음.

🔍 오류 원인 분석

  • App.jsx에서 onCreate 함수를 정의할 때, 매개변수명을 createdDate가 아니라 createDate로 잘못 작성함.
  • Editor.jsx에서는 createdDate로 데이터를 전달했지만, App.jsx에서는 createDate를 받으려고 했기 때문에 데이터가 제대로 반영되지 않음.

📌 즉, 변수명이 일관되지 않아 onSubmit이 정상적으로 동작하지 않은 것!

✅ 해결 방법

  • onCreate 함수에서 createDate → createdDate로 수정하여 Editor에서 전달하는 데이터와 일치하도록 변경.
const onCreate = (createdDate, emotionId, content) => {
  dispatch({
    type: "CREATE", 
    data: {
      id: idRef.current++,
      createdDate,  // ✅ 여기 변수명을 일치시킴
      emotionId,
      content,
    }, 
  });
};

🎯 이번 오류를 통해 얻은 점

  • 컴포넌트 간 데이터 전달 시, 변수명을 일관되게 유지하는 것이 중요함!
  • 오류를 찾는 과정에서 코드 구조를 다시 한 번 살펴볼 수 있어서 좋았음.
  • 개발자 도구에서 상태를 확인하는 과정이 도움이 되었음.

👉 앞으로는 데이터 흐름을 좀 더 꼼꼼하게 확인하고, 변수명을 통일하도록 신경 써야겠다! 😃

✅ 마무리

 

이번 구현에서 뒤로 가기 방지, 날짜 상태 관리, 감정 선택, 작성 완료 및 취소 기능을 모두 처리했다.

특히 replace: true를 활용해 뒤로 가기 방지 기능을 구현까지 New페이지 기능 구현을 마무리하였다. 

 

이번 기능을 구현하면서   useState를 활용한 상태 관리가 다소 어렵고 복잡하게 느껴졌다.

객체 상태 관리 방식에 대한 연습이 더 필요하겠다는 생각이 들었다.

앞으로는 이런 특성들을 고려하여 보다 안정적으로 상태를 관리하는 방법을 익혀야 할 것 같다. 🚀

 

728x90
반응형