문제 해결 - 하이픈(Hyphen) 삽입
문제 상황
1.받아오는 api에서 phoneNumber이 하이픈이 없는 상태에서 데이터를 받는다.
ex) 01000000000
2. 사용자에게 보이는 input 값은 하이픈이 있는 상태로 보여야한다.
ex) 010-0000-0000
3. 단, api를 보낼 때는 하이픈이 없어야한다.
해결 방법
간단하다.
사용자가 보는 ui에는 하이픈이 포함되게,
보내는 데이터는 하이픈 없이 전송하면 된다.
우선 받아오는 api에서 하이픈이 없는 것을 확인하고,
요렇게 하이픈 있는 상태로 렌더링 한 후,
value에다가 넣어주면 된다..!
그러면 이렇게 하이픈을 잘 표시해서 렌더링 할 것이다 !
어라 ?
그러면 value 값은 하이픈이 있는 상태인데,
보내는 데이터도 하이픈이 포함되어있는 거 아닌가 ?!
맞다, 이번에는 보내는 데이터에 하이픈을 없애고 보내보자.
보내는 데이터는 formData에다가 보내기 때문에
여기에다는 하이픈을 없애는 작업을 해야한다.
전체적인 휴대폰 번호의 함수이다.
event.target은 뭘까 ?
이벤트가 발생한 DOM 엘리먼트를 나타낸다.
여기서 handleInputChange함수는 input의 onChange 이벤트에서 호출된다.
즉, 이 함수에서 event.target은 input 엘리먼트를 가리키고,
그 안의 name과 value는 inpue의 name 속성과 현재 입력된 value 값을 나타낸다 !
콘솔로 찍어보면 더 알기 쉬울 것이다.
함수 안에다가
를 넣어보자
입력할 때마다 value 값이 바뀐다..!
아하 그래서 value값을
라고 하이픈 없는 상태로 저장했구나 !
그럼 이걸 formData에 보내면 하이픈 없는 상태로 보내겠네 ?!
setFormData는 이전의 formData 상태를 기반으로 새로운 상태를 설정하는 데 사용된다.
여기서 ...formData는 기존의 formData를 전개 연산자로 가져와 해당 객체를 복사한다.
그 후 [name]: formattedValue 부분은 [name]이 현재 input 엘리먼트의 name 속성이고,
formattedValue는 해당 input 엘리먼트에서 받은 값이다.
따라서 setFormData를 통해 해당 name의 상태가 formattedValue로 업데이트되고, 이렇게 변경된 상태는 다음 렌더링에 반영된다.
즉, setFormData를 통해 formData의 phoneNumber 속성을 formattedValue로 업데이트하여 하이픈 없는 형식으로 저장하게 된다.
그리고 렌더링 시에는 renderHyphenNumber를 통해 해당 phoneNumber 값을 하이픈이 있는 형식으로 렌더링하여 사용자에게 보여준다.
결과로 보자.
사용자에게 보이는 ui는 하이픈이 있지만 ?
formData에는 하이픈이 없이 잘 들어간다!
개발 문제 해결하기 대성공~