[React] input type="date" 기본값, 초기값을 현재시간(오늘날짜)으로 설정하기

 

 

input type="date" 에서 기본으로 보이는 날짜를 오늘 날짜로 설정되게끔 만들어보자! 

 

 

 

 

 1. input 태그를 작성한다. 

 

import { useNavigate } from "react-router-dom";
import MyButton from "../components/MyButton";
import MyHeader from "../components/MyHeader";
import { useState } from "react";

const New = () => {
  const navigate = useNavigate();
  return (
    <div>
      <MyHeader
        headText={"새 일기쓰기"}
        leftChild={
          <MyButton text={"< 뒤로가기"} onClick={() => navigate(-1)} />
        }
      />
      <div>
        <section>
          <h4>오늘은 언제인가요?</h4>
          <div className="input-box">
            <input type="date" /> // (1) input 태그 작성
          </div>
        </section>
      </div>
    </div>
  );
};

export default New;

 

 

 

 

 

 2. date 상태(state)를 생성하고, input에 onChange 이벤트를 달아준다. 

 

import { useNavigate } from "react-router-dom";
import MyButton from "../components/MyButton";
import MyHeader from "../components/MyHeader";
import { useState } from "react";

const New = () => {
  const [date, setDate] = useState(); // (2) date state 생성 (input에 저장되는 숫자를 state로 핸들링)

  const navigate = useNavigate();

  return (
    <div>
      <MyHeader
        headText={"새 일기쓰기"}
        leftChild={
          <MyButton text={"< 뒤로가기"} onClick={() => navigate(-1)} />
        }
      />
      <div>
        <section>
          <h4>오늘은 언제인가요?</h4>
          <div className="input-box">
            <input
              value={date} // value에 state 넣기
              type="date"
              onChange={(e) => setDate(e.target.value)}  // (3) onChange 이벤트 달기
            />
          </div>
        </section>
      </div>
    </div>
  );
};

export default New;

 

 

콘솔을 확인해보면 state를 확인할 수 있다.

 

 

 

 

 3.  getStringDate 함수를 만든다. 

 

import { useNavigate } from "react-router-dom";
import MyButton from "../components/MyButton";
import MyHeader from "../components/MyHeader";
import { useState } from "react";

const getStringDate = (date) => {
  return date.toISOString().slice(0, 10); // (4) toISOString 메서드 이용
};

const New = () => {
  console.log(getStringDate(new Date())); // 콘솔에 찍어보기

  const [date, setDate] = useState();

  const navigate = useNavigate();

  return (
    <div>
      <MyHeader
        headText={"새 일기쓰기"}
        leftChild={
          <MyButton text={"< 뒤로가기"} onClick={() => navigate(-1)} />
        }
      />
      <div>
        <section>
          <h4>오늘은 언제인가요?</h4>
          <div className="input-box">
            <input
              value={date}
              type="date"
              onChange={(e) => setDate(e.target.value)}
            />
          </div>
        </section>
      </div>
    </div>
  );
};

export default New;

 

 

콘솔 결과 (참고로 콘솔 찍을 당시 현재 날짜는 2023/11/10이었다.)

 

 

date 객체에는 toISOString이라는 메서드가 있는데, 이는 ISO 양식의 문자열을 반환하는 메서드이다.

반환값은 언제나 24글자 또는 27글자(각각 YYYY-MM-DDTHH:mm:ss.sssZ 또는 ±YYYYYY-MM-DDTHH:mm:ss.sssZ)이다. 

여기서 원하는 부분은 YYYY-MM-DD까지이므로  0부터 9까지 자르면 년월일까지 받아올 수 있다.

 

 

 

 

 4. date state의 초깃값을 getStringDate 함수를 호출한 것으로 바꿔준다. 

 

import { useNavigate } from "react-router-dom";
import MyButton from "../components/MyButton";
import MyHeader from "../components/MyHeader";
import { useState } from "react";

const getStringDate = (date) => {
  return date.toISOString().slice(0, 10);
};

const New = () => {
  const [date, setDate] = useState(getStringDate(new Date())); // (5) 초기값 설정

  const navigate = useNavigate();

  return (
    <div>
      <MyHeader
        headText={"새 일기쓰기"}
        leftChild={
          <MyButton text={"< 뒤로가기"} onClick={() => navigate(-1)} />
        }
      />
      <div>
        <section>
          <h4>오늘은 언제인가요?</h4>
          <div className="input-box">
            <input
              value={date}
              type="date"
              onChange={(e) => setDate(e.target.value)}
            />
          </div>
        </section>
      </div>
    </div>
  );
};

export default New;

 

 

 

위와 같이 새일기쓰기 페이지가 켜지자마자 날짜창에 오늘의 날짜가 기본적으로 들어가있게 만들었다!