react로 위와 같은 리스트 페이지를 만들었다. hook 을 이용해 변수에다 배열로 리스트 값을 세팅했다. 특정 항목들을 삭제하려고 한다. 항목이 삭제되었음을 보여줘야 하는데 간단하게는 페이지를 재호출하면 된다. 아래와 같은 방법으로.
window.location.reload(false);하지만 위의 방법은 좋지 않다. 삭제할때마다 api를 호출해야 하니 부하가 발생하고 다시 불러오면서 화면이 리프레쉬되는 장면이 사용자에게 좋아보이지 않는다.
처음에는 리스트에 key를 가지고 제거하면 어떨까 하고 찾아보니 onRemove 같은 함수를 만들어서 처리하던데 그냥 배열에 filter 를 먹여서 useState 로 다시 세팅하면 된다.
- listVal이 리스트를 만드는 값이고 setList 로 세팅한다.
- rangeIdx 값이 삭제할 배열값이다.
- setList로 값을 다시 세팅하려고 filter 를 건다. filter 안에서 rangeIdx 배열을 map으로 돌리면서 listVal.idx 값이 있는지를 체크한다. 없으면 -1 을 리턴하니 있는 값은 빼고 없는 값만으로 세팅한다. rangeIdx 에 있는 값만 빼고(삭제하고) 배열을 다시 세팅한다. 삭제 처리를 이렇게 하면 간단하게 항목에서 사라진다. 훨씬 깔끔하고 부하도 적다.
- listVal 배열 안에서 rangeIdx 배열을 돌리면서 처리한다. 이중 for문 같은 구조다.
const [listVal, setList] = useState({idx:0,name:''})const listVal = [{"idx":"1","name":"test1"},{"idx":"2","name":"test2"},{"idx":"3","name":"test3"},{"idx":"4","name":"test4"},{"idx":"5","name":"test5"}];const rangeIdx = [{"rangeIdx":"2"},{"rangeIdx":"3"}];
setList(listVal.filter(listVal => rangeIdx.map((rangeIdx:any)=>rangeIdx.rangeIdx).indexOf(listVal.idx) < 0));
위는 여러개의 파일을 삭제할때 처리하는 방법이다. 한개만 삭제할때는 아래와 같이.
- selectedIdx.idx 값이 삭제할 값이다.
setList(listVal.filter(list => list.idx !== selectedIdx.idx));
