사용자 입력값으로 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 부분을 듣고 생긴 질문입니다!
답변 2
0
안녕하세요 이정환입니다.
onChangeInput 함수에서 <input type="date"/>의 입력 값을 Date 객체로 변환해 state에 보관하는 이유는, 로컬스토리지나 App 컴포넌트의 data State에 Date 객체 형태로 값을 유지시키기 위함입니다. 그리고 이를 통해 Date 객체의 날짜 연산으로 월 단위로 필터링 하는 등의 동작을 수행할 수 있기 때문이죠!
그래서 헷갈리지 않고 깔끔하게! State에 보관되는 날짜 정보는 모두 Date 객체로, <input> 에 들어가는 값으로는 변환된 문자열로만 유지시키도록 요렇게 구현해 두었습니다 😃
0
안녕하세요, 인프런 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객체로 변환하는 과정이 필요할 수 있습니다.
- React에서는 상태를
참고 가능한 유사 질문 링크:
이 같은 방식으로 개발시에는 Date 객체와 입력 값의 데이터 처리를 어떻게 할지 잘 계획하는 것이 중요합니다. 처음에는 번거로워 보일 수 있지만, 다양한 날짜 기능과의 호환성을 위해 Date 객체를 사용할 때 자주 이 과정을 거치게 됩니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
useEffect와 lifecycle문의
0
31
2
프론트엔드 학습 수준 문의
0
43
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
51
2
데이터 로딩중 화면만 계속 나와요!!
0
56
2
퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요
0
80
2
이후의 커리큘럼 문의
0
102
2
실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.
0
50
2
최적화 관련 질문있습니다 (useMemo 등)
0
85
3
프로바이더 컴포넌트의 위치는 어떤 기준인가요?
1
82
3
Date 객체에 관련하여 질문드립니다.
0
85
2
리액트 개정판 교재 질문
0
60
2
예제코드가 안나와요!
0
78
2
select a variant 선택에서 javascript와 javascript+react compiler 중 무엇을 선택해야하나요? com
0
109
2
onMouseEnter 관련 문의 드립니다
0
93
3
배열의 렌더링 관련 질문 드립니다.
0
73
2
2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.
0
113
2
TS, 리액트 강의중에 뭘 먼저 수강하는게 좋을까요?
0
137
2
useCallback 적용한 onCreate, onUpdate, onDelete 함수..
0
71
1
vs code 자동완성관련 문의
0
113
2
91강 useEffect내에서 상태변화함수 호출시 발생하는 에러
1
181
2
87강 필터 함수 질문
0
69
2
useRef, useState count 비교
0
67
2
안된다고했던 이유가 무엇이었는지 모르겠습니다
0
91
2
85강에서 객체를 왜 클래스로 만들어서 new 하지 않는건지 궁금합니다.
0
76
2