리액트에서는 컴포던트 간에 state를 공유하려면 props로 전달해 주어야 사용할 수 있습니다.

따라서 상위 컴포넌트에 있는 state를 하위컴포넌트에서 사용하려면 props로 전달해 줘야 합니다.

이때 연결되어 있는 하위 컴포넌트들이 많아지면 props로 계속 전달해 줘야 하기 때문에

state의 관리가 어렵고 코드가 복잡해질 수 있습니다.

React Redux는 state를 외부 파일에서 관리하고, props 없이 state를 공유하고 관리할 수 있도록 해줍니다.

Redux는 리액트뿐만 아니라 다른 곳에서도 사용할 수 있지만 여기서는 리액트에서 사용하기 위해

React Redux를 연습해 보겠습니다.

| React Redux 사용

먼저 React Redux를 설치해 보겠습니다.

npm install @reduxjs/toolkit react-redux

state를 관리할 파일인 store.js를 만들어 주고

// store.js

import { configureStore } from "@reduxjs/toolkit";

export default configureStore({

reducer: {},

});

이런 식으로 코드를 넣어주면 되는데 state를 관리하기 위한 기본 세팅이라 생각하면 됩니다.

그리고 사용하려고 하는 앱의 최상위 컴포넌트에 redux의 Provider를 사용하여 감싸주면 됩니다.

create-react-app으로 파일을 만들었으면 index.js 파일로 들어간 다음에

// index.js

import { Provider } from "react-redux";

import store from "./store";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(

<App />

</Provider>

);

이런 식으로 App컴포넌트를 감싸주면 모든 하위 컴포넌트들과 store.js에 있는 state를 공유할 수 있습니다.

그럼 이제 state를 저장하려면 store.js에 리덕의 createSlice를 사용하여 state를 저장해 주고

store.js에 configureStore을 이런 식으로 바꿔주면 됩니다.

// store.js

import { configureStore } from "@reduxjs/toolkit";

import { createSlice } from "@reduxjs/toolkit";

export const counterSlice = createSlice({

name: "number",

initialState: {

value: 10,

},

});

export default configureStore({

reducer: {

counter: counterSlice.reducer,

},

});

이제 저장이 완료되었고 외부 리액트 컴포넌트에서 사용하려면

React Redux의 useSelector를 가져온 다음 이런 식으로 사용하면

화면에 내가 store에 저장해 놓았던 값인 10이 화면에 출력이 될 겁니다.

import "./App.css";

import { useSelector } from "react-redux";

function App() {

const number = useSelector((state) => state.counter.value);

return (

{number}

</div>

);

}

export default App;

이제 하위 컴포넌트들을 만들고 그 안에 버튼을 만든 다음에

버튼을 클릭하면 state값이 바뀌도록 만들어보겠습니다.

먼저 컴포넌트들을 다음과 같이 만들어 보겠습니다.

function App() {

const number = useSelector((state) => state.counter.value);

return (

<h1>결과: {number}</h1>

</div>

);

}

const First = () => {

return (

<div>

<h1>first</h1>

</div>

);

};

const Second = () => {

return (

<div>

<h1>second</h1>

</div>

);

};

그리고 state를 변경하고 싶으면 store.js에서 변경하는 함수를 작성해 주면 됩니다.

import { configureStore } from "@reduxjs/toolkit";

import { createSlice } from "@reduxjs/toolkit";

export const counterSlice = createSlice({

name: "number",

initialState: {

value: 10,

},

reducers: {

increment: (state) => {

state.value += 1;

},

},

});

export const { increment } = counterSlice.actions;

export default configureStore({

reducer: {

counter: counterSlice.reducer,

},

});

이런 식으로 createsSlice에 reducers를 만들고 함수를 작성해 주고,

export const { increment } = counterSlice.actions; 이런 식으로 밑에서 export 해주면 됩니다.

여러 개의 함수도 작성할 수 있습니다.

이제 이 함수를 사용하려면 사용하려는 컴포넌트에

import { useSelector, useDispatch } from "react-redux";

import { increment } from "./store";

const Second = () => {

const dispatch = useDispatch();

return (

<div>

<h1>second</h1>

<button onClick={() => dispatch(increment())}>숫자변경</button>

</div>

);

};

이런 식으로 useDispatch를 사용하여 state값을 변경할 수 있습니다.

이제 버튼을 클릭하면 숫자를 변경할 수 있습니다.

React - React Redux 사용해보기