031. [코딩애플] [part2] Redux 1 Redux Toolkit 설치

Redux 사용법

1. 패키지 설치하기

npm install @reduxs/toolkit react-redux

2. store.js 파일 만들기

이름은 자유 작명이나 일반적으로 store로 만들고,

확장자는 jsx 불가. js 문법임.

일반적으로 redux나 store 폴더를 만든 뒤 거기에 위치시킨다.

// src/redux/store.js

3. store.js 파일 기본 세팅

아래 내용을 복붙한다.

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
}) 

4. main.jsx에서 최상위 컴포넌트 감싸기 및 store.js 파일 import 하기

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

// store 임포트
import store from './store.js';

ReactDOM.createRoot(document.getElementById('root')).render(

  // 최상위 컴포넌트 감싸기
  <Provider store={store}>
    <React.StrictMode>
        <App />
    </React.StrictMode>
  </Provider>
)

이렇게 되면 Provider로 감싼 컴포넌트는 모두 store에 저장된 state를 가져다 쓸 수 있다. 그런데 지금 위 코드에서는 App 컴포넌트를 감싸고 있고, App 컴포넌트가 최상위 컴포넌트라면 그냥 모든 컴포넌트가 다 쓸 수 있다는 뜻이다.