react-redux 사용

0. 사용하는 이유

 

간단히 이야기하면 기존 방식은 부모에서 props로 데이터를 넘겨 자식 컴포넌트에서 사용하게 되는데 자식이의 자식의 자식....  계속 내려가게 된다면 예를 들어 proos.proos.proos.proos.proos.proos.proos.proos 와 같이 사용하게 된다면

복잡할 뿐만 아니라 실수 발생 확률이 높아진다. 

redux를 사용하면 store를 구독하는 컴포넌트들이 구독하고 있는 값이 변경되면 리렌더링 되도록 하는 방식이다.

 

코딩애플 유투버님이 참 쉽게 설명해 주니 보면 좋다 ( https://www.youtube.com/watch?v=QZcYz2NrDIs )

---

1. 설치

npm install redux ( https://ko.redux.js.org/ )

npm install react-redux ( https://react-redux.js.org/ )

---

2. 사용

 

App.js ( 해야할게 없음 )

 

import Header from './components/Header';

import Footer from './components/Footer';

import 'bootstrap/dist/css/bootstrap.min.css';

import Top from './components/Top';

import Bottom from './components/Bottom';

function App() { 

  return (

    <div>

      <Header />

      <h1>메인 페이지</h1>

      <Top />

      <Bottom />

      <Footer />

    </div>

  );

}

export default App;

 

store.js

 

export const increase = () => ({ type: 'INCREMENT' });  // 가져와 사용할때 편하게 사용하기 위함

export const decrease = () => ({ type: 'DECREMENT' });

const initstate = { // 기본 값

  number: 0,

};

const reducer = (state = initstate, action) => { // 값 수정

  switch (action.type) {

    case 'INCREMENT':

      return { number: state.number + 1 };

    case 'DECREMENT':

      return { number: state.number - 1 };

    default:

      return state;

  }

};

export default reducer;

 

index.js 

 

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

import { BrowserRouter } from 'react-router-dom';

import reducer from './store';

import { Provider } from 'react-redux';

import { createStore } from '@reduxjs/toolkit';

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

const store = createStore(reducer); // 스토어 생성

root.render(

  <BrowserRouter>

    <Provider store={store}>  // App에서 사용하기 위해 App을 감싸야함

      <App />

    </Provider>

  </BrowserRouter>,

);

reportWebVitals();

 

Top.js

 

import React from 'react';

import { useSelector } from 'react-redux';

const Top = (props) => {

  const number = useSelector((store) => store.number); // 스토어에서 가져다 사용

  return (

    <div>

      <h1>Top</h1>

      번호 : {number}

    </div>

  );

};

export default Top;

 

Bottom.js

 

import React from 'react';

import { useDispatch } from 'react-redux';

import { decrease, increase } from '../store';

const Bottom = (props) => {

  const dispatcher = useDispatch();  // 스토어에서 가져다 사용

  return (

    <div>

      <h1>Bottom</h1>

      <button onClick={() => dispatcher(increase())}>증가</button> 

      <button onClick={() => dispatcher(decrease())}>감소</button>

    </div>

  );

};

export default Bottom;

 

 - 출처 메타코딩 최주호