Redux 및 RTK를 React 애플리케이션에 설치하기

이 수업에서 우리는 React 컴포넌트가 Redux와 함께 작동할 수 있게 해주는 패키지 React-Redux와 도구 Redux Toolkit(약어 RTK)을 우리 애플리케이션에 설치할 것입니다.

우리 프로젝트를 열고 터미널에서 다음 명령어를 입력하세요:

terminalnpm install @reduxjs/toolkit react-redux

이제 우리 애플리케이션의 전역 상태가 저장될 저장소 store를 생성해야 합니다. 먼저 src 폴더 안에 app 폴더를 생성하고, 그 안에 store.js 파일을 만들겠습니다. 그런 다음 이 파일에 RTK에서 configureStore를 가져와야 합니다:

app/store.jsimport { configureStore } from '@reduxjs/toolkit'

다음으로 빈 store를 생성하고 최소한 하나의 reducer를 전달하겠습니다:

app/store.jsexport default configureStore({
  reducer: {}
});

우리의 React 컴포넌트가 store와 함께 작동할 수 있도록 하기 위해 다음 단계를 수행하겠습니다. 이미 코드가 있는 main.jsx 파일로 들어가겠습니다:

main.jsximport React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

가져오기에 이전 단계에서 생성한 store와 컴포넌트 Provider를 포함하는 줄을 추가하겠습니다:

main.jsximport store from './app/store'
import { Provider } from 'react-redux'

그런 다음 우리의 메인 컴포넌트 App를 Provider로 감싸고, 프롭스로 store를 전달하겠습니다:

main.jsx<React.StrictMode>
  <Provider store={store}>
    <App />
  </Provider>
</React.StrictMode>

마지막으로, 메인 React 컴포넌트 App에 다음 코드를 배치하겠습니다:

App.jsxfunction App() {
  return <h2>This is my first Redux app!</h2>
}

export default App

프로젝트를 다시 시작하면 브라우저 창에서 'This is my first Redux app!'을 볼 수 있습니다. 유효한 리듀서가 없다는 경고는 지금은 무시하세요. 여러분 모두 성공했습니다, 축하합니다 :).