React 나만의 사전 Delete 기능 구현

오늘 할 일

나만의 사전 목록에서 필요없는 단어를 삭제하는 기능 구현해보기

메인화면

삭제기능을 구현하기 위해서 우선, redux부분을 관리하는 dictionary.js 파일에서 삭제기능 Action과 Action Creator부분을 작성해 준다.

dictionary.js (Action Part, Action Creator Part)

그리고, 같은 파일에서 firebase와 통신할 수 있는 함수 또한 만들어 적어주자. 삭제하기 버튼을 눌렀을시 넘어오는 값에서 id값이 존재하지 않으면 id가 없다는 경고문을 띄어주고, 있다면 firestore에 저장되어 있는 id값과 비교하여 일치하는 값을 삭제 dispatch요청이 일어나도록 해준다.

dictionary.js (Firebase Part)

그다음, reducer부분에서 filter 반복문을 통해, firestore에 저장되어 있는 전체 데이터 값에서 삭제 요청이 일어난 index번째 데이터 값과 일치하지 않는 데이터들을 새로운 배열로 출력하게 해준다.

dictionary.js (Reducer Part)

마지막으로, 실제 화면에서 보여질 부분을 담당하는 Wordlist.js파일에서 삭제버튼을 눌렀을 시, 해당 단어의 index값을 넘겨주고 useSelect를 이용해 모든 데이터를 가져와 해당 index값의 id를 넘겨주어 dispatch 요청이 일어나도록 함수를 걸어주면 끝이난다. 

Wordlist.js (메인 화면 삭제기능 구현)

맨 위 화면의 딸기 단어의 삭제 버튼을 누르면 정상적으로 해당 단어가 삭제되는 것을 확인할 수 있다.

삭제 후 화면