[React Redux] React에서 Redux를 사용해보자(2)

이 글은 아래 글의 후속편이니 아래 글부터 보고 오는 것을 추천한다.

[React Redux] React에서 Redux를 사용해보자(1)

이제 추가 기능을 구현했으니 삭제 기능을 구현해보자.

삭제 기능에서 해야할 것은 특정 할 일에 붙어있는 삭제 버튼을 누르면 해당 할 일을 삭제하는 것이다. 따라서 특정 할 일에 대한 id가 필요하다. 그 후 할 일들이 저장된 배열을 돌면서 해당 id를 가지는 할 일을 제외한 나머지를 새로운 배열에 넣은 후 리턴해주면 되는 것이다. 아래는 Redux 코드이다.

//할 일 삭제는 해당 할 일의 id를 이용하여 찾아낸 후 삭제한다.
const deleteTodo = (id) => {
  return { type: DELETE, id }
}

const reducer = (state = [], action) => {
  switch (action.type) {
   
   ...

    //filter함수를 사용하여 받은 id의 할 일을 제외하고 나머지를 리턴 -> 받은 id의 할 일만 빠진다.
    case DELETE:
      return state.filter((e) => e.id !== action.id)
    default:
      return state
  }
}

이를 적용할때는 id를 가지고 삭제 기능을 수행해야 하므로 useDispatch를 사용한다. 이를 사용하여 Action Creator인 deleteTodo를 호출하여 reducer에 접근하면 된다.

 

지난번 코드 중 화면에 할 일을 표시하는 부분을 잠깐 보자면 아래와 같은데

const todoList = useSelector((state) => state)

...

<h3>할 일</h3>
        <ul>
          {todoList.map((e) => (
            <Todo key={e.id} {...e} />
          ))}
        </ul>

useSelector를 사용하여 store에 저장된 값(할 일이 저장된 배열)을 불러온 후, map 함수를 사용하여 해당 배열을 돌면서 <Todo /> 컴포넌트로 배열의 원소 자체를 props로 넘겨줬다. 따라서 <Todo /> 컴포넌트에서는 우리가 addTodo를 사용하여 할 일 배열에 저장했던 text와 id를 사용할 수 있다.  따라서 Todo.js에서는 props로 받은 id와 deleteTodo를 사용하여 '삭제' 기능을 구현할 수 있다.

import React from 'react'
import { useDispatch } from 'react-redux'
import { ActionCreators } from './redux/store'

const Todo = ({ text, id }) => {
  const dispatch = useDispatch()
  const onClick = () => {
    dispatch(ActionCreators.deleteTodo(id))
  }

  return (
    <li>
      {text} <button onClick={onClick}>DEL</button>
    </li>
  )
}

export default Todo

이전 글에 이어서 코드는 모두 작성했다! 그러나 이렇게 실행하면 오류가 날 것이다. React Redux를 사용하기 위해서는 Redux에서 생성한 store와 React 앱을 연동해야 한다. index.js에 아래와 같이 Provider로 감싸주면 된다.

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import reportWebVitals from './reportWebVitals'
import { Provider } from 'react-redux'
import store from './redux/store'

ReactDOM.render(
  <Provider store={store}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Provider>,
  document.getElementById('root'),
)

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()

React와 store를 연동하기까지 했으면 잘 실행될 것이다!