(21).이정환_react.js강의_감정일기장_프로젝트_7강_New 페이지 구현2(작성중...)

1_ useNavigate()의 nav(-1) : 페이지의 뒤로 이동 기능

2_ 하나의 state 변수에 여러 값 설정하는 방법 => useState({ 속성1, 속성2, ...}) , 초기값 data를 객체로 한다.

import {useState} from 'react';

function New(){

    const [input , setInput] = useState({
        id,
        createDate,
        emotionState,
        content
    })


    return(<>
    .
    .
    <input type="date value={input.createDate}> 
    </>)

}

3_ <input type="date">에 value값을 넣을 때, new Date()값이 아닌 String으로 'YYYY-MM-DD'으로 넣어야 한다.

function formatDate(dateValue) {
  const date = new Date(dateValue);

  const YYYY = date.getFullYear();
  const MM = String(date.getMonth() + 1).padStart(2, "0");
  const DD = String(date.getDay()).padStart(2, "0");

  return `${YYYY}-${MM}-${DD}`;
}

4_ 반대로, <input type="date">에서 반환된 target.value 값을 다시 TimeStamp값으로 변환하기

const onChangeDate = (event)=>{

    //event.target.value 는 'YYYY-MM-DD' 형식의 문자열로 반환

   setInput({
   ...input,
   createDate : new Date(event.target.value).getTime();
   })


}

★한개의 onChange 핸들러로 여러 input 태그 다루기 => spread + target.name 이용

//event.target.value 변환 메소드 작성

const getEventTargetValue(eventName,eventData)
{
    //input의 name 값에 따라 적절히 일기장 데이터 프로퍼티에 변환 구현 코드
       if(eventName==="createDate)
    {
        return new Date(eventData).getTime();
    }
}


//onChange 핸들러
const onChangeInput = (event)=>{

    setInput({
        ...input,
        [event.target.name] : formatData(event.target,value),

    });
}

5_ 오늘의 감정 onCick핸들러 만들기 //이거 존니ㅏ 어렵네

6_★ Editor 컴포넌트는 /New 페이지, /Edit 페이지에 사용될 컴포넌트이기에, => Editor 컴포넌트의 props를 이용하여, '작성완료' 버튼을 누를시, 전달받은 props에 따라 일기 생성, 일기 수정을 구분하기

7_nav("/",{replace : true}) : main 페이지로 이동 + 뒤로가기 방지 기능