React) 메소드없이 배열 갱신하기

이번 과제를 하면서 코딩애플 강좌를 들으며 배웠던 내용들이
새록새록 떠오르기 시작했다.

그 중에 하나가 배열을 재갱신 하는 방법이다.
특히 메소드 없이 어떻게 배열에 요소를 빼거나 추가할 수 있을까?

const student = [{name: "yong", age: 18}, {name: "lee", age: 15}];

const newEl = {name: "choog", age: 26};

기존의 student에 newEl을 추가하려고 한다.

let [arr, setArr] = useState(student)

먼저 useState로 student를 arr에 할당해준다.

setArr([newEl, ...arr]);

위와 같이 setArr에 [newEl, ...arr] 이라는 새로운 배열을 넣어주면 arr은 새 배열을 반환하게 된다.
이때 arr는 스프레드 연산자로 넣어줘야만 잘 작동이 된다. (배열은 재할당이 불가하기 때문)

const student = [{name: "yong", age: 18}, {name: "lee", age: 15}];
const newEl = {name: "choog", age: 26};

let [arr, setArr] = useState(student);

setArr([newEl, ...arr]);
console.log(arr)	// [{name: "choog", age: 26}, {name: "yong", age: 18}, {name: "lee", age: 15}]

정리하자면, concat이나 unshift 같은 메소드 필요 없이
원하는 요소들의 순서대로 setArr에 그대로 스프레드 연산자를 써서 넣어줌으로써
짧은 코드로 원하는 배열로 재할당이 가능하다.

추가로, newE1의 값들이 변수라면 어떻게 써야할까?

//아래 코드와 똑같은 newE2, newE3를 만드려면?
const newEl = {name: "choog", age: 26};

//name과 age가 변수일때(let name = "choog" / let age = 26)
const newE2 = {name: name, age: age};
//추가로 newE2처럼 key와 value의 이름이 똑같다면 ES6부터는 아래처럼 축약해서 작성 가능
const newE3 = {name, age};