Redux

상태관리 라이브러리인 redux를 사용법에 대해서 간단하게 알아보자.

A , B , C , D, E
5개의 컴포넌트가 있다고 생각해보자

만약 A컴포넌트가 E컴포넌트에 접근하려고 한다면

A => B => C => D => E(종착지)순으로
4번을 거쳐 복잡하게 접근해야한다.



redux를 사용하게 되면 Store라는 상태가 관리되는 오직 하나의 공간에서 state들을 생성하고,

props를 사용하지 않고서 하위 컴포넌트 상위 컴포넌트 상관 없이
전역에서 state를 사용할 수있다.

Redux 사용법

터미널에서
npm install @reduxjs/toolkit 설치 후
리덕스를 사용하면서 state들을 보관 할 파일을 만들어준다.

상태관리를 하는 이 공간을 Store라고 부른다.

store.js

mport { configureStore, createSlice } from '@reduxjs/toolkit'

let user = createSlice({
    name : 'user',
    initialState : 'kim'
})
export default configureStore({
    reducer: {
        user : user.reducer
    }
})

상태관리 할 수 있는 공간인 store.js를 생성해서
Reducer를 생성해준다.

Reducer는 하나의 state가 관리되는 곳에서 직접 state를 변경 혹은 추가 시키는 함수이다.

createSlice를 import하고
createSlice 함수를 사용하면 된다.


name = state 이름 (reducer 이름)
initialState는 state의 초기값

이 하나를 slice라고 한다.

하나의 state를 만든것과 같다.

createSlice를 담은 변수 user를 reducer함수에 저장한다.
ex) 작명 : user.reducer

index.js

import { Provider } from 'react-redux';
import store from './store.js'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
);

Provider 컴포넌트를 import 해주고
Provider컴포넌트에 store라는 속성을 열어주고 만들어놨던 store.js파일을 import해서 속성값으로 가져와주고 App컴포넌트를 감싸주면 된다.

생성한 reducer로 이제 App컴포넌트와 그 모든 자식 컴포넌트에서 사용이 가능하게 되었다.

product.js

다른 컴포넌트에서 state를 사용해보자

import { useSelector } from 'react-redux'
function Product() {
    let a = useSelector( (state) => {return state})
    console.log(a.user)		// {user: 'kim'}
    console.log(a.user)		// kim

}

그 전에 useSelector hook을 import하고
useSelector함수를 사용해야 한다.

useSelector는 redux의 상태값을 조회 하기 위한 hook 함수이다.

console창에 잘 출력된다~




처음 배우는것이라 그런지 상당히 복잡하다..ㅠ