[React(Ts)] array 에서 특정값 제거 하기(remove)

javascript 의 배열에 값을 넣고 빼기 위해서는 shift, unshift, push, pop를 주로 사용한다.

하지만 순차적으로 제거 및 추가가 되기 때문에 특정 값을 삭제 하기 위해서는 다른 언어처럼 .remove(index) 기능이 없기 때문에 다른 메소드를 사용해야 한다.

 

처음에는 array.splice 를 사용했다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Array.prototype.splice() - JavaScript | MDN

보통은 정상적으로 특정한 값을 제거하거나 추가가 가능한 메소드로 자주 사용하지만, react에서 useState 훅스를 사용 할때는 splice가 두번 연속 실행 되는 문제를 발견 했다.

첫번째 오류 예시

function examply(item:Data): void{
	//useState setter
  setSelectedData((data) => {
    let newData: Data[];
    let index: number = examData.findIndex(
      (data) => data.color === item.color
      );
    return newData = [...data.splice(index, 1)];
  });    
}

위 예시에서 분명 return으로 값이 도출 되어서 state의 값이 변경 되었지만, 다시 setter가 시행되면서 원치않은 데이터가 도출 된다.

splice를 검색해보면 splice로 원본 배열의 특정값을 제거한 요소 제거한 후 return 값으로 새로운 배열을 반환하기 때문에 원본의 값은 그대로 존재하는게 원인이 되었던 것이다.

 

그래서 새로운 배열을 리턴하는 splice보다는 filter를 사용하여 원본 배열의 특정값을 삭제 하는 방법으로 변경 하였다.

function example(item: Data): void {
    setSelectedData((data) => {
        return data.filter(
          (obj) => !(obj.color === item.color)
        );
    });
  }

기존의 데이터에서 filter를 사용해서 조건식에 맞는 값을 바로 제거하는 방법을 사용하여 오류를 해결 하였다.

forEach 와 map 처럼 forEach는 return값을 정하여 값을 반환 할 수 있지만 map은 새로운 배열을 리턴 하는 것과 같다.

기본적인 메소드의 사용법을 알지 못해서 나온 오류..디테이하게 사용하자..

 

끝..