사용자 입력값으로 input 수정시 문자열을 date객체로 바꾸는... - 인프런

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

12.14) New 페이지 구현하기 2. 기능

사용자 입력값으로 input 수정시 문자열을 date객체로 바꾸는 이유

해결된 질문

작성

const getStringedDate = (targetDate) => {
  let year = targetDate.getFullYear();
  let month = targetDate.getMonth() + 1;
  let date = targetDate.getDate();

  if (month < 10) {
    month = `0${month}`;
  }
  if (date < 10) {
    date = `0${date}`;
  }

  return `${year}-${month}-${date}`;
};

초기값 설정 할 때 input 태그가 date 객체를 해석하지 못해서 위의 getStringedDate() 함수로 문자열로 변환하여 value 속성으로 넣어줘야 한다고 하셨는데요,

사용자 입력값을 넣을 때는 input을 수정하면 문자열로 들어가기 때문에 다시 date 객체로 바꿔주는 함수를 새로 사용해야 하던데

<input
    name="createdDate"
    onChange={onChangeInput}
    value={getStringedDate(input.createdDate)}
    type="date"
/>

이미 여기서 getStringedDate()로 객체에서 문자열 변환하는 함수를 사용해서 값을 나타내야하기 때문에 onChangeInput() 함수를 사용해야 하는건가요?

이 흐름이 맞는 거 같긴한데 왠지 좀 번거로운거 같아서 제가 이해한게 맞는지 궁금해서요

참고로 섹션13 12.14)강의의
10:22 부분을 듣고 생긴 질문입니다!

javascript react node.js

답변 2

이정환 Winterlood

지식공유자

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

onChangeInput 함수에서 <input type="date"/>의 입력 값을 Date 객체로 변환해 state에 보관하는 이유는, 로컬스토리지나 App 컴포넌트의 data State에 Date 객체 형태로 값을 유지시키기 위함입니다. 그리고 이를 통해 Date 객체의 날짜 연산으로 월 단위로 필터링 하는 등의 동작을 수행할 수 있기 때문이죠!

그래서 헷갈리지 않고 깔끔하게! State에 보관되는 날짜 정보는 모두 Date 객체로, <input> 에 들어가는 값으로는 변환된 문자열로만 유지시키도록 요렇게 구현해 두었습니다 😃

인프런 AI 인턴

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

green님께서 질문하신 내용은 input 태그에서 날짜 데이터를 다룰 때 왜 Date 객체와 문자열 간의 변환을 해야 하는지에 대한 이해와 관련이 있네요. 해당 부분은 많은 개발자들이 혼동할 수 있는 부분입니다.

React에서 input 태그의 type="date"은 문자열 형식의 날짜 (yyyy-mm-dd) 를 요구합니다. 하지만 JavaScript의 Date 객체는 이 형식을 직접 지원하지 않기 때문에, 날짜를 Date 객체로 관리하고 싶을 때는 문자열 변환 과정을 거쳐야 합니다.

설명:

getStringedDate 함수:
- 이 함수는 Date 객체를 yyyy-mm-dd 형식의 문자열로 변환합니다. 이는 input 태그의 value 속성에 맞춰 날짜를 출력 가능하게 합니다.
onChangeInput 함수:
- onChangeInput은 사용자가 날짜를 입력할 때, 해당 값이 문자열 형식으로 들어오기 때문에, 이를 다시 Date 객체로 변환하여 상태를 관리하기 위해 사용됩니다.
번거로움:
- React에서는 상태를 Date 객체로 관리하는 것이 여러 메서드 사용에 유리할 수 있습니다. 따라서 문자열로 변환하여 UI에 보여주고 입력 값을 받을 때는 다시 Date 객체로 변환하는 과정이 필요할 수 있습니다.

참고 가능한 유사 질문 링크:

input의 value속성이 꼭 필요한가요?

이 같은 방식으로 개발시에는 Date 객체와 입력 값의 데이터 처리를 어떻게 할지 잘 계획하는 것이 중요합니다. 처음에는 번거로워 보일 수 있지만, 다양한 날짜 기능과의 호환성을 위해 Date 객체를 사용할 때 자주 이 과정을 거치게 됩니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.

현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

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

사용자 입력값으로 input 수정시 문자열을 date객체로 바꾸는 이유

설명:

참고 가능한 유사 질문 링크: