React_counter 만들기

 

 

리덕스를 이용해 counter 프로그램을 만들어 보겠다.

 

---

 

📌 파일 구조

 

redux (리덕스 관련 코드)

 -modules (state의 그룹. ex : todos.js)

    -counter.js

 -config (리덕스 설정 관련 파일)

    -configStore.js (중앙 state 데이터 관리소 -> 설정 코드)

 

 

 

📌 counter.js

 

//초기 상태값
const initialState = {
    number : 0
};

//useState로 아래처럼 작성할 경우 0에 해당하는 초기값이 위 initialState이다.
//const [number, setNumber] = useNumber(0)

//리듀서 : state에 변화를 일으키는 함수
//(1)state를 action의 type에 따라 변경하는 함수

// input에 state와 action을 받는다.
// action은 type과 value가 있다. action은 state를 어떻게 할건지
const counter = (state = initialState, action) => {
    switch (action.type) {
        default:
            return state;
    }
}

export default counter;

• state의 초기값을 설정해준다. 초기값은 꼭 객체가 아니어도 된다. 배열, 원시데이터도 가능함!
• 리듀서에 명령을 한다. > 리듀서는 변화를 일으키는 함수이기 때문이다.
• 리듀서 인자 첫번째 자리에서는 state, 두번째 자리에서는 action이라는 것을 꺼내서 사용할 수 있다.

 

 

📌 configStore.js

 

만든 모듈을 스토어(configStore)에 연결 시킨다.

// src/redux/modules/config/configStore.js


// 원래 있던 코드
import { createStore } from "redux";
import { combineReducers } from "redux";

// 새롭게 추가한 부분
import counter from "../modules/counter";

const rootReducer = combineReducers({
  //리듀서들 !!
  counter: counter, // <-- 새롭게 추가한 부분. key,value가 같으면 생략 가능
});
const store = createStore(rootReducer);

export default store;

rootReducer 안에 코드를 추가하면 스토어와 모듈이 연결된다.

 

 

 

 

📌 App.js

 

스토어와 모듈 연결 확인하기

 

import logo from "./logo.svg";
import "./App.css";
import { useSelector } from "react-redux";

function App() {
  //여기에서 store에 접근하여, counter의 값을 읽어오고 싶다
  //useSelector 라는 훅을 사용!
  const data = useSelector((state) => {
    //위 state는 중앙저장소 안에 있는 state 전체를 말한다. ex :counter
    return state;
  });

  console.log("data", data);
  return <div>redux</div>;
}

export default App;

컴포넌트에서 스토어를 조회할 때,

react-redux에서 제공하는 useSelector 라는 훅을 사용한다.