[React] Spread Operator

Spread Operator

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

 

...array 

원하는 곳에 spread operator(...이름) 입력하면 스프레드되어 들어간다. 

 

 

 

...Object 

 

오브젝트도 가능하다. 

 

 

 

 

...을 붙이지 않았을 때 

 

 

Nested object가 된다. 

 

 

 

---

앞에서 작업하던 코드를 고쳐보자.

보기에 괜찮긴 하지만 너무 길다. 

 

 

 

 

 

1. 모든 if statement를 지운다. 

 

 

 

 

2. firstName property, lastName property, email property 등 어떤 것이든 

이전 벨류(prevValue)들을 스프레드 오퍼레이터가 들어간 오브젝트로 리턴한다. 

 

 

 

 

3. 그 다음 new value를 추가하는데

name: 통과해서 들어오는 내용을 담을 키 이름을 적어주고,  

value 유저가 타이핑한 내용을 담은 value를 적어준다. ??

we're goint to add in a new value for whichever name of input that got passed in and the value that the user typed in. 

 

 

 

 

4. 

first name에 ㅇㅇㅇ을 입력했을 때 

 

 

 

 

state hooks를 보면 name 키가 새로 생기고 거기에 저장이 되고 있다.

 

 

 

이 말은 위에 있는 1번 name은  declared but it's never read한 상태이고 

2번 name은 새로운 키 이름을 만들어서 interpreting 되고 있다. 

 

 

여기서 이름은 무엇을 넣든 상관없다. 

 

 

 

 

이 것을 고치기 위해 들어오는 내용 event.target으로 받아야할까?

하지만 setState에서는 event.target을 받지 못한다. 

 

 

 

 

이름 해결하는 방법은 value에 넣을 키를 array로 넣으면 된다. 

 

 

문제 해결 

 

 

 

문서 참고 하기 

JavaScript set object key by variable [duplicate]

https://stackoverflow.com/questions/11508463/javascript-set-object-key-by-variable

 

 

여기서 코드를 더 줄여보자.

하나의 오브젝트만 리턴하기 때문에 아래처럼 줄일 수 있다.

주의 할 점은 ( ) => { } 형태로 

preValue => {{ object }} 중괄호 두 개가 올 것같지만 오브젝트인 경우

오브젝트 인 것을 알리기 위해 ( ) 가 온다... 

 

 

 

하지만 위 처럼 코드를 작성하면 짧아서 좋기는 하지만 

다른 사람이 보면 무슨 일이 벌어지고 있는지 한 눈에 들어오지 않는다. 

그냥 위 처럼 사용하는 선호한다.