React - Redux

Redux 란

store : 변수들을 저장하고 있는 저장소입니다 -> 단 1개만 생성가능

 

view  : 우리가 보는 화면을 말합니다.

 

action : store에 있는 값을 바꾸고 싶을 때 action을 활용합니다.

-> store안의 데이터는 오로지 action으로만 변경가능하다.

-> action을 dispatch한다 라고 표현한다. 

 

reducer : 이전의 상태와 바꾸고자 하는 action을 합쳐 새로운 값을 생성합니다

-> 값을 실질적으로 수정하는곳, CRUD 가능.

 

쉽게말하자면 store라는 창고가 있다. 거기서 데이터들을 보관할거고

만약 데이터를 수정할일이 있으면 수정해 달라는걸 관리인한테 알려줘서 수정을 진행해야한다.

 - 수정해달라고 알려주는거( action을 dispatch), 관리인이수정 (reducer)

 

Redux의 장점

 

1. 전역으로 값을 관리할수 있다.

Redux를 안쓸경우의 React는 최상위 컴포넌트에서, 최하위 컴포넌트로 데이터를 전해주려면

props를통해서 컴포넌트들을 타고 타고 타고 가서 전해줘야한다.

Redux를 사용하면, 전역으로 관리를 하고싶은 데이터를 따로 빼서

각 컴포넌트에서 불러줄수 있게 해준다.

 

 

 

2. 전역으로 상태를 관리할 수 있다

컴포넌트가 많고, 각자 컴포넌트에서 state를 불러서 수정을 진행을 할때,

에러가 났는데, 만약 컴포넌트가 너무 많아서 에러가 어디서 나는건지 찾기 힘들때가 있을때,

 

Redux에서 상태를 관리하면, 컴포넌트들에게는 요청만 할수있게하고,

직접 수정은 Redux가 관리해주면 버그 추적이 용이하다.

 

3. 설치

npm install react-redux
npm install redux

// 동시설치
npm install react-redux redux

 

4. 예제

1. 일단 Provider를 이용해서 내가 전역으로 관리할 범위를 지정한다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// Provider
import { Provider } from 'react-redux';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider>   // 이런식으로 
          <App />
    </Provider>
);

 

 

2. 내가 사용할 store파일을 만들고 그 store를 export 해줘서 Provider에 연결한다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import store from './components/store';
import { Provider } from 'react-redux';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store={store}> // store.js에서 export 해준게 여기로 온다.
          <App />
    </Provider>
);

 

3. store.js

// store를 생성하기위한 import
import { createStore } from 'redux';

// 데이터예제
const data = 100;


// reducer 생성 - 값을 수정하는곳
// state = 내가 관리하고싶은 데이터
// action = 내가 이 데이터를 처리하고 싶은 방법
function reducer (state = data, action){
   // action의 type에 따라서 데이터 값 변경
  if(action.type === '증가'){
    state++;
    return state // 변화된 데이터를 항상 return해 주어야한다.
  } else if(action.type === '감소'){
    state--;
    return state;
  }else{
    return state;
  }
}

// 수정된값(reducer)으로 store를 생성
const store = createStore(reducer);

// store 내보내기
export default store;

 

4. 사용

import React from "react";

// useDispatch = 값을 수정하기 위해 사용
// useSelector = 값을 꺼내오기 위해 사용
import { useDispatch, useSelector } from "react-redux";

const App = () => {
	// useSelector를 돌면서 값을 다 꺼내와서 data에 넣어줌
  const data = useSelector((state) => state);
  
  // 값을 수정하기위해 useDispatch()를 사용해서 수정할 준비를 함
  const dispatch = useDispatch();
  
  return (
    <div>
      // 전역에서 불러온 데이터를 써줌
      data: {data
      
      // 클릭시 dispatch를 이용해서 type을 줌, 
      // 여기서 type은 다른 명령어로 바꿔도 되지만, store안에서 action이 받는 애하고 동일해야함
      <button onClick={()=>{dispatch({type : '증가'})}}>더하기</button>
    </div>
  );
}

export default App;