작성배경
프로젝트 진행중에 어떤 화살표 버튼을 누르면 해당 엘리먼트(배열의 한 요소)를 기존배열을 건들지 않고, 배열 안의 순서를 바꾸어 서버에 업데이트 하도록 보내주는 작업을 진행중이다. 이 때, 당연히 알고 있다고 생각했던 기본적인 array method [ splice, slice ] 에 대해 정리가 필요함을 느꼈다.
MDN 정의를 살펴보자
— slice() : 어떤 배열의 begin부터 end까지(end는 불포함)에 대한 shallow copy를 새로운 배열 객체로 반환합니다. 원본 배열은 수정되지 않습니다.
— splice() : 배열에 있는 요소를 삭제하거나 배열에 새 요소를 추가한다.
원본을 유지하며 배열의 요소들 순서를 바꿔보자
원본을 훼손하지 않고, 새로운 배열을 만들어야 했기에 slice 메소드를 선택해야 했으나, 구현할 때 splice가 편할 것 같아서 해당 배열 자체를 deep-copy 한 후 새롭게 복제된 배열에서 작업했다. 그리고 이때, 해당 인덱스를 알아내 화살표 버튼에 따라 인덱스를 하나 앞으로, 하나 뒤로 움직이게 하는 작업을 했다.
먼저 해당 인덱스를 알아내는 방법은 다음과 같다. contents 는 해당 엘리먼트들을 가지고 있는 배열이고, content는 부모 컴포넌트에서 contents를 가지고 하나하나의 개별 컴포넌트를 만들어 주기 위해 맵핑을 통해 컴포넌트를 생성할 때 넘겨준 props 로써 하나하나의 content를 의미한다. 아래와 같이 contents 배열이 해당 content를 몇번째 인덱스에 가지고 있는지 알 수 있다.
console.log(contents.indexOf(content));자 그럼 이번 글에선 해당 요소를 한칸 MoveDown 시켜서 배열을 새로 만드는 함수를 구현해보자. 먼저 결과는 아래와 같다.
const moveDown = (contents, value) => {
const index = contents.indexOf(value);
let newPos = index + 1;
if (index === -1)
throw new Error("Element not found in content");
const newContents = JSON.parse(JSON.stringify(contents));
if (newPos >= contents.length) newPos = contents.length; newContents.splice(index, 1);
newContents.splice(newPos, 0, value); return newContents;
};
먼저 각 인자는 차례대로 contents (배열), value (옮길 요소) 이다. 먼저 위처럼 해당 index를 구하고 새로운 포지션은 한칸 뒤이니 +1 을 해준다. 그리고 기존 배열의 불변성을 유지시켜주며 splice 메소드를 사용하기 위해 deep-copy를 진행해 newContents 변수에 담아주었다.
이후 splice(index, 1)을 통해 화살표를 클릭한 엘리먼트( 여기서 인자로 받은 value ) 를 제거하고 들어가고싶은 새로운 포지션, (여기선 기존 index + 1) 에 넣어주고 그 배열을 리턴한다.
마치며
splice와 slice는 유사한 이름만큼이나 헷갈린다. 그래도 이번 기능구현을 통해 차이점을 다시금 확인하고 정리할 수 있는 유익한 시간이였다. 그리고 배열안의 요소들의 위치를 변경하는 것 조차 재밌었다. 나중엔 드래그 엔 드롭으로 기능을 구현해보고 싶다! 만세!
