티스토리 뷰

웹개발(프론트)/React

Redux

수달찌 2021. 4. 12. 23:03

목차

     

     

    구성이 react의 reducer랑 비슷하다

    어차피 react에서 redux 쓸려면 hook도 다루고 있을 테니

    reducer를 배우고 redux를 배우면 좀 익숙할 거다

     

    useReducer

    목차 어우.. 긴장이 풀려서 그런가 오늘은 진짜 몸도 사고도 안 따라줘서 잠시 useReducer 이해를 미래의 나에게 맡겼었다. 그리고 그 미래의 나가 지금의 나다 후.. 그래도 컨디션 좀 회복하니깐 이

    sirong.tistory.com

    Redux란

    쉽게 말해서 파일을 구분 짓지 않는 데이터 저장소를 만들고, 관리하는 기술이다.

     

    기존의 프로그램 구성이 

    MVC 방식인데,

    자료화면은 코드의 덩치가 커질수록,

    데이터를 주고받는 구조가 복잡해진다는 것이다.

     

    예로 들어,

    다음 메인 페이지를 활용할 때,

    메일이 왔는지, 블로그 새 글 알람이 있는지,

    카카오 지갑에 얼마 있는지 등등 데이터가 여러 가지인데

    이 모든 게 Redux와 같은 체제를 쓰지 않으면 죄다 각자 불러와야 한다.

     

    반면에 리덕스의 시초가 된 Flux 구조는 (영감을 받고 만들었다 한다)

    Store에 해당 데이터를 다 저장하며,

    Dispatcher를 통하여 데이터를 갱신하는 방식으로

    데이터를 한 군데에서 관리할 수 있다.

     

    설치

    React 프로젝트를 만들자

    npx create-react-app (프로젝트_이름)

    이제 리덕스 설치를 위해

    터미널에 해당 명령어를 입력해주자.

    npm install redux

yarn add redux

     

     

    코드

    ... 오늘은 VanillaJs에서 Redux를 쓸 건데

    html에서 js를 script 해서 불러올 시 import에서 문제가 생기기 때문에

    React 프로젝트에서 만들었다.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <span></span>
    <button id="plus">plus</button>
  </body>
</html>

    bodybody에 출력용 span과 제어용 button을 추가하였다

    import { createStore } from "redux";

const btnAdd = document.getElementById("plus");
const span = document.querySelector("span");

const PLUS = "PLUS";

function Store (number = 0, action) {
  switch(action.type){
    case PLUS:
      return number +1;
    default:
      return number;
  }
}

const countStore = createStore(Store);

function onChange(){
  span.innerText = countStore.getState();
}

countStore.subscribe(onChange);

function handleClick(){
  countStore.dispatch({type: PLUS});
}

btnAdd.addEventListener("click", handleClick);

    src 폴더의 index.js를 바꾸었다.

     

    해석

    import { createStore } from "redux";

const btnAdd = document.getElementById("plus");
const span = document.querySelector("span");

const PLUS = "PLUS";

function Store (number = 0, action) { // 데이터 정의, action은 redux를 변환하는 인자
  switch(action.type){	// action의 type에 따른 분기문
    case PLUS:			// case PLUS에선
      return number +1; // number를 1씩 더함
    default:
      return number;
  }
}

const countStore = createStore(Store); // createStore로 Store를 redux 데이터 저장소로 만든다.


btnAdd.addEventListener("click", handleClick); // 버튼을 클릭할때마다 handleClick 실행

function handleClick(){
  countStore.dispatch({type: PLUS}); // redux의 데이터를 변환한다. type PLUS로
}

countStore.subscribe(onChange); // redux의 상태가 변할때마다 함수 onChange가 실행된다.

function onChange(){
  span.innerText = countStore.getState(); // rdeux의 상태를 getState로 가져온뒤,
  // span의 내부텍스트로 대입한다.
}

    store내의 state는 변수를 변화시키는 게 아니라

    새로운 변수를 재 정의하는 것이다.

     

    이 개념은 hook의 개념과 같으니 어렵지 않을 것이다.

    지금은 문제없을 건데 array / object를 쓸 때 기억하자.

    추가하거나 제거하는 게 아닌 재정의를 해야 한다.

    끝

    저작자표시

    '웹개발(프론트) > React' 카테고리의 다른 글

    Redux Toolkit  (0) 2021.04.15
    Redux by react  (0) 2021.04.14
    useMemo  (0) 2021.04.04
    useReducer  (0) 2021.04.03
    useEffect  (0) 2021.04.02
    댓글
    공지사항
    최근에 올라온 글
    최근에 달린 댓글
    Total
    Today
    Yesterday
    링크
    TAG more
    «   2025/01   »
    일 월 화 수 목 금 토
    1 2 3 4
    5 6 7 8 9 10 11
    12 13 14 15 16 17 18
    19 20 21 22 23 24 25
    26 27 28 29 30 31
    글 보관함