How to duplicate in react ?
프로젝트에서 복제 기능을 맡게 되었다.
복제 기능은 노션에서 많이 보던 기능이고 그 이외에는 잘 써본적은 없는 기능이라 처음에는 막막했지만
배열에서 조금 더 접근 해보면 누구나 쉽게 할 수 있는 기능이구나 생각했다.
내가 했던 기능은 체크 버튼을 클릭하면 작은 모달창이 뜨고 그 모달창에 duplicate 버튼 클릭시 똑같은 UI가 생겨나는 것이다!
처음에 짠 로직은 이러했다.
const handleduplicate = id => {
const duplicateData = [...Itemdata].filter(item => item.id === id);
const newGroup = [duplicateData[0], ...Itemdata];
//복제를 누르면 배열 맨 앞에 생성하게 만들었다.
setItemdata(newGroup);
};Groupdata는 Mockdata를 배열 상태값에 넣은 값이다.
이 상태값은 부모 컴퍼넌트에서 props로 받은 상태이다.
배열로 되어있는 데이터를 복사한 후에 필터를 돌려서 item과 id의 값이 같으면 같은 것을 하나 생성하는 로직이다.
이렇게 되면 복제 기능이 된다!!!!
하지만 문제는 제대로 된 복제가 아니라는 점이다.
왜냐하면 이렇게 되면 id 값 까지 같아지기 때문에 삭제를 했을 때 같이 삭제가 되기 때문이다😢
console.log >>>> Result
0: {**id: 0, title: 'blur', subtitle: 'Img'}
1: {**id: 0, title: 'blur', subtitle: 'Img'}
2: {id: 1, title: 'blurs', subtitle: 'Ima'}
3: {id: 2, title: 'Free ', subtitle: 'Ima'}
콘솔에 찍어보면 복제를 클릭시 해당 데이터가 이렇게 발생된다.
그러니 삭제를 눌렀을 때 같이 삭제가 된다.물론 삭제 기능도 고유 값이 id가 같아야지 삭제가 되는 로직이기 때문이다.
복제 기능을 사용하는 이유는 사용자 입장에서 내용물은 거의 비슷한데 다시 작성하자니 귀찮고 이래저래 이러한 편리성을 염두해서 필요한 기능이기 때문이다.
즉,id값을 다르게 추가하는 로직이 필요한 것이다.
그것이 아래 해당 로직이다!
const handleduplicate = id => {
const duplicateData = [...Itemdata].filter(item => item.id === id);
const newGroup = [{ ...duplicateData[0] }, ...Itemdata];
newGroup[0].id = newGroup.length - 1;
setItemdata(newGroup);
};
newGroup이라는 변수는 해당 데이터를 복제해서 새로 생성하는 것을 담고 있다. 여기에 0번째 인덱스인 아이디에 접근해서 그 길이만큼 -1하는 로직을 추가하게 되면 배열의 길이값에서 하나가 줄어드는 새로운 id값을 받게 된다.
console.log >>>> Result
0: {id: 3, title: 'blur', subtitle: 'Img'}
1: {id: 0, title: 'blur', subtitle: 'Img'}
2: {id: 1, title: 'blurs', subtitle: 'Ima'}
3: {id: 2, title: 'Free ', subtitle: 'Ima'}그렇게 되면 삭제시 같이 삭제 되는 현상이 사라지게 되고 원하는 복제 기능도 잘 되는걸 확인 할 수 있다 😃
TIL ?
✔ 이번 기능을 하면서 console.log을 중요성을 많이 느꼈습니다.
또 로직을 짤 때 순서를 먼저 생각하고 짜는게 좋겠다는 것을 배웠습니다.
위의 로직도 똑같은 것을 복제하기 위해서 id값이 같은 것을 필터를 통해서 추출을 해야 했고 그 다음으로는 그것을 새로운 변수에 담아 복제를 하게 했습니다. 그 이후 id값이 같기 때문에 또 다른 변수에 담아 새로운 id값을 만들어 주는 로직까지 한 step 한 step을 밟아서 만들어졌기 때문 입니다!
