전개연산자

전개연산문 […data], {…data}

전개연산문 자체는,

let a = [1, 2, 3];
a = [...a, 4]; // [1, 2, 3, 4]
a = [a, 4]; // [[Array(3)], 4] 이런식으로 어레이 안에 어레이가 생기는 문제 발생,

let b = {a:1, aa:2, aaa:3};
b = {...b, aaaa:4}; // {a: 1, aa: 2, aaa: 3, aaaa: 4}
b = {b, aaaa:4}; // {b:{원래내용물}, aaaa:4} 마찬가지로 오브젝트안에 오브젝트가 생기는 문제

이 형식으로 간단히 내용물의 포장을 없애고 안에 있는 값만 펼쳐서 놓는 기능을 한다. {data} 랑 비슷한듯? 이로인하여 원래 데이터를 유지하고 4가 추가되어 업데이트 된다.

React.js state 응용형

const [data, setData] = useState([]);

// data = [{}, {}, {}]

function(){
	setData([...data, {...object}]);
}

react 의 state 훅과 궁합이 잘 맞는데 간단히 데이터 추가 함수를 만들 수 있다. 오브젝트형 데이트를 추가할 것이기에 업데이트 데이터는 오브젝트형이다. 만약 어레이형이라면 똑같이 전개 시켜줘야 하는데 아래 참조

reducer 응용형

const insert = (state, action) => {
		return [...state, ...action.d];
    }
}

// data = [..., ..., ...]

function Context({children}) {
    const [data, dispatch] = useReducer(insert, []);

어레이에서 원래 있던 데이터를 유지하고 쌓는데 사용하는 구문, 만약 특정 어레이를 const 로 재 선언 처리하면 원래 있던 데이터가 싹 다 날아가고 갱신되게 되는데, 안에 있던 데이터를 유지하고 갱신시키지 않고 추가시키는 방법

데이터가 어레이인지 오브젝트인지 반드시 구분해야 하며 데이터가 어레이라면 어레이 안에, 오브젝트라면 오브젝트 안에 넣는것이 중요하다.

let a = [1, 2, 3];
a = [...a, 4]; // [1, 2, 3, 4]

let b = {a:1, aa:2, aaa:3};
b = {...b, aaaa:4}; // {a: 1, aa: 2, aaa: 3, aaaa: 4}

let c = [{a:1}, {a:1, aa:2}, {a:1, aa:2, aaa:3}];
c = [...c, {...b}]; // [ {a: 1}, {a: 1, aa: 2}, {a: 1, aa: 2, aaa: 3}, {a: 1, aa: 2, aaa: 3, aaaa: 4}]