spread는 펼치다 라는 뜻이 있다.
그 뜻과 같이 spread 문법을 사용하면 객체 혹은 배열을 펼쳐 사용할 수 있다.
const [inputs, setInputs] = useState({
name: "",
email: "",
tel: ""
});
이렇게 useState를 이용해 값을 저장한 객체가 있고
이 객체의 값을 변경하기를 원할 때
클라이언트에서 입력받은 value 값과 태그의 id 값을 통해
const onChange = (e) => {
const value = e.target.value;
const id = e.target.id;
setInputs({
...inputs,
[id]: value
})
};
위와같이 set 함수를 사용하여 값을 변경해주었는데
그 내부에서는 spread 연산자를 사용해서
선택된 id 의 값을 변경해주었다.
여기서 spread 연산자를 통해 inputs 객체를 깊은 복사 해주어 사용했다.
이와 같이 spread 연산자를 사용하면 객체를 새로 만들어 값을 넣어주는 깊은 복사를 할 수 있다.
하지만 다차원의 배열을 복사할 때는 적합하지 않다.
일차원 배열에서만 사용하자.
'WEB > React' 카테고리의 다른 글
[React - Trouble Shooting] state 값이 변경되지 않는 문제 (0) | 2023.06.01 |
---|---|
[React - Trouble Shooting] 불필요한 렌더링으로 인한 문제 (0) | 2023.05.30 |
[React] map 함수 (0) | 2023.03.28 |