#React redux 사용법!

이번에는 Redux라는 것을 공부한다

 

React에서 꼭 필요한 거라고 보면 된다

 

Redux란,

데이터를 전달할 때, 하나하나 거쳐가지 않고 한 번에 전달하기 위해서 사용하는 것이다.

상태를 관리할 때, 다른컴포넌트를 전달할 때, props로 전달해야 했는데, 한 번에 전달할 수 있는 별도의 store라는 저장소에 저장해서 사용할 수 있다

예를 들면,

공공기관에 전화했는데, 〇〇부서로 전화 해보시겠어요? 그 〇〇부서 전화하면 또 부서에서 〇〇부서로 전화해 보세요

라고 하면 깊은 빡침이 생길 것이다.

Redux를 쓰게 한다면 그런 뻉뺑이 없이 바로 전화통화가 가능하게 하는 좋은 일이 생긴다고 한다

 

 

1. Redux 설치

npm install react-redux

 

 

2. 실험대상인 component를 생성한다

 

TestComponent.js

const TestComponent = () => {

    return(
        <h1></h1>
    )
}

export default TestComponent

 

 

3. store.js 생성 하자

 

 

4. Action 만들기

 

Action이란, 상태를 뜻한다. 웹에서 어떤 이벤트가 발생했을 때, Action이라고 보면 될 것 같다

Action은 반드시 type라는 것이 존재하여야 한다.

 

export const plusStr = () => ({ type: 'PLUS', str: 'helloWorld' });

이렇게 작성해 주고, type에 따라 실행하는 함수를 고르고, 적용할 문자열을 받는다고 생각하면 된다.

 

 

5. 상태 객체 만들기

const initState = {
    str: 'Not'
}

초기화 상태인 객체를 만들어 준다

 

 

6. reducer 만들기

export const reducer = (state = initState, action) => {
    switch (action.type) {
        case 'PLUS':
            return { str: state.str + state.str}
        default:
            return state;
    }
}

이렇게 해주고, reducer 함수가 실행될 때, action의 type에 따라 값이 결정될 것이다

PLUS일 경우 기존 문자열에 똑같은 문자열을 더하는 식을 return 해주는 걸로 한다

 

 

7. index.js에서 Redux설정

 

createStore의 from이 잘못되어서 삽질 겁나했다. react-redux가아니라 그냥 redux

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from "react-redux";
import { createStore } from "redux";
import reducer from './sotre';

const store = createStore(reducer);

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

기본 제공하는 createStore, Provider를 Import

아까 만든 store.js를 Import 한다

 

HTML 코드에는 Provider로 App을 감싸서, 모든 컴포넌트가 store를 이용하도록 넘겨준다

 

8. useSelector 함수를 사용

 

TestComponent.js

import { useSelector } from "react-redux"

const TestComponent = () => {

    const str = useSelector((store) => store.str);
    
    return(
        <h1>{str}</h1>
    )
}

export default TestComponent

useSelector를 사용하면 index.js로부터 왔던 store를 사용해, store.js에 있는 reducer의 반환 값을 받아 올 수 있다

약간 복잡하지만 곰곰이 잘 생각해보면 알 수 있다

저는 브라우저 화면이에오...

 

 

이번엔 버튼을 추가해서, 상태를 바꿔 보도록 한다

 

아 물론 다른 컴포넌트에서 말이다

 

9. useDispath 사용하기

 

Test2Component.js

import { useDispatch } from "react-redux"
import { plusStr } from './store'

const Test2Component = () => {

    const disPath = useDispatch();
    
    return(
        <button onClick={ () => { disPath(plusStr()) }}>문자열 추가하기</button>
    )
}

export default Test2Component

react-redux에서 useDispath를 import 한다

store.js에 있는, type이 담겨있는 함수를 import 한다

 

그리고 사용방법은 위와 같다.

plusStr이 실행이 되면 reducer에서 PLUS case를 탈 것이고 문자열이 추가가 될 거라고 생각한다

 

이렇게 새로운 Component를 만든 뒤, 언제나 그렇듯이 App.js에도 컴포넌트를 추가한다

 

늘 언제나 그렇듯이

브라우저 확인해보자

 

초기화면

 

버튼 클릭했을 때

이런 실패했어,,,,

추가는 되었지만 글자가 바뀌지 않았다..... 그래도 PLUS는 전달했다고 생각한다

 

 

자 이제 틀린 부분을 고쳐 보겠다

 

store에 state가 아니라 action을 이용해야 했었다

 

그러면 이렇게 잘 된다