이번 과제에서 회원가입 페이지는 총 11개의 input을 가지고 있는 페이지였다. input태그를 총 11번 선언해주는 방법도 있었겠지만, 당연히 그런 하드 코딩은 권장되지 않는 것으로 이해하고 있었기 때문에 같은 컴포넌트에 서로 다른 props를 내려주면서 컴포넌트를 최대한 재사용할 수 있도록 했다. 그러한 과정에서 11개의 input 입력값을 같은 객체의 서로다른 key에 대한 value로 저장하였고, 그중 한개의 데이터는 먼저 입력된 패스워드에 대한 확인 절차로만, 받아두고 백엔드로 전송해선 안 되는 '패스워드 확인' 데이터였다.
그래서 총 객체 내 11개의 데이터에서 하나를 삭제해야 했는데 Javascript에서 객체 데이터를 삭제하는 연산자가 있었고, 사용법은 다음과 같았다.
const test = {a: 0 , b : 1, c : 2, d : 3, e : 4}
delete test.a;
console.log(test);
>> {b : 1, c : 2, d : 3, e : 4}물론 이 방식에 문제는 없었지만 왜인지 내 경우에는 자꾸만 에러가 발생했다. 그래서 검색을 하다가 새로운 방식을 찾게 됐다.
const test = {a: 0 , b : 1, c : 2, d : 3, e : 4}
const test1 = {a : 0, ...test}
const test2 = {...test}
console.log(test2);
>> {b : 1, c : 2, d : 3, e : 4}이런 방식으로도 똑같은 결과를 만들어낼 수 있다. 참고하자.
