날짜값 바꾸기

1. 각 글에 맞는 날짜를 지정해줘야됨.

let [날짜, 날짜변경] = useState([new Date(), new Date(), new Date()]);

 

• 날짜는 월부터 초까지 많은 데이터들이 필요하기 때문에 하나의 객체로 state 배열 변수를 만들어준다.

2. 원하는 날짜의 데이터로 만들어주기 위해 날짜 데이터를 리턴해주는 함수를 만든다.

  function getFormattedDate(date) {
    let month = ('0' + (date.getMonth() + 1)).slice(-2);
    let day = ('0' + date.getDate()).slice(-2);
    let hours = ('0' + date.getHours()).slice(-2);
    let minutes = ('0' + date.getMinutes()).slice(-2);
    let seconds = ('0' + date.getSeconds()).slice(-2);
    return `${month}/${day} ${hours}:${minutes}:${seconds}`;
  }

• getFormattedDate라는 함수를 만들고 매개변수로 date를 넣어준다. 나중에 함수를 쓰고 매개변수를 써주면 그 시간에 맞는 데이터를 리턴해준다.

3. getFormattedDate 함수를 써주면서 날짜를 불러온다.

{
        글제목.map(function (a, i) {
          return (
            <div className='list' key={i}>
              <h4 onClick={() => { setModal(!modal); setTitle(i) }}>{글제목[i]} <span onClick={(e) => {
                e.stopPropagation();
                let copy = [...따봉];
                copy[i] = copy[i] + 1;
                따봉변경(copy);
              }}>👍</span> {따봉[i]} </h4>
              <p>{getFormattedDate(날짜[i])}</p>
              <button onClick={() => {
                let copy = [...글제목];
                let dateCopy = [...날짜];
                copy.splice(i, 1);
                dateCopy.splice(i, 1);
                글제목변경(copy);
                날짜변경(dateCopy);
              }}>삭제</button>
            </div>
          )
        })
      }

• i를 써서 각 글 번째에 맞는 날짜가 나오도록 해준다. 그 순서에 맞는 날짜 데이터가 들어가며 각 글에 맞는 날짜가 나온다.

4. 새로운 글을 쓸 때마다 날짜 데이터가 나와야하기 때문에 글을 작성하는 곳에서 지금까지의 날짜 데이터들을 복사하고 날짜변경 state 함수를 사용하여 새로운 날짜 데이터를 넣고 나오게 해준다.

<button onClick={() => {
        if (입력값.trim() === '') {
          alert("내용 입력!");
          return;
        }
        let copy = [...글제목];
        let 따봉copy = [...따봉];
        let dateCopy = [...날짜];
        copy.unshift(입력값);
        따봉copy.unshift(0);
        dateCopy.unshift(new Date());
        글제목변경(copy);
        따봉변경(따봉copy);
        날짜변경(dateCopy);
      }}>글발행</button>

• 정리 :
  
  1. 글에 맞는 날짜를 넣어주기 위해 글자의 수만큼 날짜 배열 state를 만들어준다.(날짜이니 Date() 객체로 만들기)
  2. 날짜를 원하는대로 출력해주기 위해 getFormattedDate라는 함수를 만들어 원하는 날짜 표기 방식대로 리턴되도록 해준다.(각 글 순서에 맞는 날짜대로 표시하기 위해 매개변수 date를 만들어준다.)
  3. 나오길 원하는 곳에 만들어둔 함수를 쓰고 각 글 순서에 맞게 나오도록 getFormattedDate(글 순서에 맞는 매개변수)를 써준다.
  4. 새로운 글이 나오는 곳에도 날짜를 만들어줘야하기 때문에 새로운 날짜 state를 추가해주고 날짜 변경 state 변경 함수를 써준다.