new Date()

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

12.15) Edit 페이지 구현하기

해결된 질문

작성

const Editor = ({ onSubmit, initData }) => {
  const nav = useNavigate();

 
  const [input, setInput] = useState({
    createdDate: new Date(), // 여기서 그냥 getTime하면 안되나요?
    emotionId: 8,     content: "",
  });

  useEffect(() => {
    if (initData) {
      setInput({
        ...initData,
        createdDate: new Date(Number(initData.createdDate)),
      });
    }

input의 createdDate와 initData의 createdDate 비교 기준이 new Date()과 new Date().getTime() 로 달라서 useEffect안에서 createdDate: new Date(Number(initData.createdDate)), 이렇게 한다는 건 이해가 갑니다. 다만 처음부터 input의 createdDate를 new Date().getTime()으로 만들면 되지 않을까요?

javascript react node.js

답변 2

이정환 Winterlood

지식공유자

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

우선 이전의 질문은 해결이 되신건가요? 질문 가이드라인대로 답변이 도움이 되었다면 해결로 체크 또는 댓글을 남겨주시면 감사하겠습니다.

그렇게 하셔도 상관 없습니다. 방법은 하나가 아니라 다양하니까요 😃 단 input 태그의 value 값으로 활용할 때에 타임스탬프를 Date 객체로 변환하는 별도의 처리를 더 해 주셔야 합니다.

인프런 AI 인턴

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

김강연님이 질문하신 부분에 대해 설명드리겠습니다.

new Date()와 new Date().getTime()의 차이를 이해하는 것이 중요합니다.

new Date(): 이 경우, Date 객체 자체를 생성합니다. 이는 날짜와 시간이 있는 객체로, 다양한 메서드를 사용해 연, 월, 일 등을 쉽게 접근하고 조작할 수 있습니다.
new Date().getTime(): 이 메서드는 1970년 1월 1일 UTC 기준으로 현재 시간까지의 밀리초를 숫자로 반환합니다. 쉽게 말해, 특정 시점을 정확히 표현하는 용도로 사용됩니다.

김강연님이 언급하신 대로, input의 createdDate를 처음부터 new Date().getTime()으로 설정하면 useEffect에서 굳이 Number()로 변환하여 새로운 Date 객체를 생성하지 않아도 됩니다. 이는 또한 시간을 저장하거나 비교할 때 더 쉽게 관리할 수 있습니다.

다만, 이와 같이 변경할 경우 getTime()으로 반환된 숫자를 다시 Date 객체로 변환해 사용할 시점에 주의가 필요합니다. 왜냐하면, UI에서 날짜를 포맷팅하거나 특정 날짜 메서드를 사용할 때는 Date 객체가 필요하기 때문입니다.

관련해서 질문 답변이 있던 콘텐츠를 참고하실 수 있도록 유사한 질문 링크를 제공해드리겠습니다:

\u0008DiaryEditor 페이지 date가 이상하게 받아져요

이와 같은 방식으로 원하시는 기능을 구현하시는데 도움이 되기를 바랍니다.

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

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

new Date()