javascript : forEach 배열안에 특정 id 데이터 삭제하기

구현하고싶은 기능

배열안에 객체가 있고 해당 특정 id 가있다고 할때 

삭제하기 버튼을 누르면 특정 id값이 있는 데이터만 삭제를 하고 싶다.

 

 

🔥 리덕스를 사용했다.

 

let products = createSlice({
  name:'products',
  initialState:[],
reducers :{addfilter(state,action){
    state.forEach((item,index)=>{
      if(item.id === action.payload){
        state.splice(index ,1)
      }
    })
  }

1.  initialState 안에는 [ ] 빈객체가 있다.

2. 여기에 추가된 아이템이 { }객체로 담길것이다. 

3. 추가된 아이템은 특정 id 가 있다.

4.  Redux의 변경함수인 reducers을 사용한다.

5. forEach 는 자바스크립트 함수인데.  fot문 또는 map과 같은 반복문이라 생각하면 된다.

6. 배열을 순회하며 돌것이다. 파라미터는 ( 하나의 값, index ) 가 들어간다.

7. 배열을 돌면서 item .  id 값과 action.payload 값이 동일하면 ?

8.  state 에 들어간 값 즉,   initialState 에 들어간 값을 splice한다.

9.  splice도 자바스크립트 함수인데 ( 시작할값 , 몇번째까지? ) 삭제할것인지 매개변수로 주면된다.

10. 나는 index, 1개 값만 삭제한다 의 식으로 작성하였다.

  <td ><button onClick={()=>{dispatch(addfilter(product[i].id))}} ><FiX/></button></td>

위의 코드는 X모양의 Ui를 클릭하면 해당 dispatch를 통해 addfilter의 reducers로 갈것이고 action값은

product[i].id 즉, 상품의 해당 id값이 매개변수로 넘어간다. 

 

---

 

 

📙 느낀점 

삭제기능 중 특정 id만 삭제가 되는 부분은 처음 구현을 해보았는데 자바스크립트의 언어를 더 공부해야 겠다고 생각이 들었다. 하나의 컴포넌트 안에서 state를 만들어 filter을 사용해도  구현이 되었겠지만 나는 리덕스를 이용해 action을 보내주고 id값을 구현하려고 하다보니 내가모르는 자바스크립트 언어가 있어 어려움이 있었다.

그래도 구글링을 하면서 forEach와, splice라는 언어에 대해 더 잘 알게되었고 어떻게 사용하면 좋은지 알게된 시간이였다.