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

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

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

npm install @reduxjs/toolkit react-redux

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

import { configureStore } from '@reduxjs/toolkit'

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

export default configureStore({
	reducer: {}
});

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

import 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를 포함하는 줄을 추가하겠습니다:

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

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

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

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

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

export default App

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

수업에서 설명한 대로 여러분의 애플리케이션에 Redux와 RTK를 설치하세요. 애플리케이션이 작동하는지 확인하세요.