[…spread, state ]
const handleTodoSubmit = () => {
if (input) {
const newTodo = { text: input, completed: false };
setTodos([...todos, newTodo]);
setInput('');
}
};함수를 사용하던 중
setTodos([...todos, newTodo]);
이 부분에 대해서 갑자기 궁금해졌다. spread 연산자를 사용하는데 기존의 배열을 변경하지 않고,새로운 배열을 생성하는 것을 쓰기 위해서 [] 배열 안에 spread, newTodo를 사용한 것인데,
마치 파이썬의 append함수와 비슷하다는 생각이 들었다. 뭐 이거는 어쨌든 넘어가도 되는 내용이고 아무튼 요즘 파이썬 공부도 같이 했었어서 갑자기 생각났다.
어쨌든 이어서 말하자면
...todos, newTodo]와 같이 spread 연산자를 사용하면 기존 배열인 todos에 newTodo를 추가한 새로운 배열을 생성할 수 있다. 이렇게 생성된 새로운 배열은 기존 todos 배열을 변경하지 않고 새로운 요소를 추가한 형태로 구성된다.
Spread 연산자는 배열 또는 객체를 확장(전개)하는 역할을 한다. 배열에서는 [...arr] 형태로 사용하며, 객체에서는 {...obj} 형태로 사용한다.
[...todos, newTodo]는 기존 todos 배열의 모든 요소를 복사하여 새로운 배열에 포함시키고, 마지막에 newTodo를 추가한 것이다. 이를 통해 기존 배열을 직접 수정하지 않고도 새로운 배열을 생성할 수 있다.
이러한 방식으로 배열을 확장하면 불변성(Immutability)을 유지할 수 있다. 불변성은 데이터의 원본을 보존하면서 변경 작업을 수행하는 것으로, 상태 관리에서 중요한 개념 중 하나이다. 불변성을 유지하면 상태 변화를 추적하고 예측하기 쉬워지며, 성능 개선과 데이터 관리의 용이성을 가져올 수 있다.
오히려 자바스크립트에서는 내장함수를 push() 메서드를 사용하여 배열의 끝에 요소를 추가 할 수 있다. push() 메서드는 원본 배열을 변경하며,새로운 요소를 배열의 끝에 추가하는 역할을 한다.
따라서 자바스크립트에서는 spread 연산자나 push()를 사용하는 것이 보편적이라고 한다.
