[React]redux

728x90

지금까지 usereducer와 usestate로 상태 관리해보았다

이번엔 redux!!!!

참고사이트!!!

https://ko.redux.js.org/

Redux - 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. | Redux

자바스크립트 앱을 위한 예측 가능한 상태 컨테이너.

ko.redux.js.org

redux 설치

npm install react-redux

react - redux 설치

npm install react-redux

리덕스 라이브러리!!!!!

같이 사용할 수 있는 언어는

javascript, vue, angular, react와 같이 사용할수 있다

react와는 찰떡임!!!!!!!!!!!

redux를 쓰는 이유가....

1. props 문법 귀찮을때 사용???ㅎㅎㅎ

2. state 변경관리할때 사용???ㅎㅎㅎ

비슷하겠짛ㅎㅎㅎ

쓰는 이유!!!

복잡한 상태관리할때!!!!!! 리덕스!!!!!

간단한 상태관리는 usestate

컴퍼넌트 만들고 원하는 곳에 컴퍼넌트 배치하다가 state를 사용하고 싶을때가 있
는데 props를 사용하여 state를 배경 컴퍼넌트 -> 메뉴컴퍼넌트 -> 글자컴퍼넌트
단계별로 전송해서 사용 100개씩 있다고 했을때는.... 귀찬앙 ㅜㅜ 그래서 사용
하는게 redux!!!! 리덕스를 사용하면 state를 보관 할 수 있는 store(이름 변경가능)라는 보관함을
파일을 만들수 있음 store 안에 state들을 보관하구 각 컴퍼넌트에서
store에 보관한 state들을 불러올수 있음 props 필요없음!!!! 꺄ㅑㅑㅑㅑㅑㅑㅑ

리덕스 3가지 규칙

1. 하나의 애플리케이션 안에서는 하나의 스토어가 있다(하나뿐인 데이터 공간???)

2. 상태는 읽기 전용이다

리액트는 setState 메소드를 사용해야만 상태변경 가능하지만

리덕스는 액션이라는 객체를 통해서만 상태 변경 가능

3. 리듀서는 순수 함수여야한다

Store - Action - Reducer

리덕스 모듈 1 ~ 3

1. 액션(Action)

상태를 업데이트 할 때 액션을 전달함
액션은 객체로 표현되며 type속성을 필수로 가지고 있음
그 외에 속성을 추가할수 있음!!!!!!!

액션 객체

{
    type: "INCREMENT",
}

2. 액션 생성함수(Action Creator) - 있어도 되고 없어도 됨

액션을 만들어주는 함수이다

function increment(){
    return {
        type: "INCREMENT",
        add: add
    }
}

const increment = (add) => ({ type: "INCREMENT", add: add})

3.리듀서

상태를 업데이트 시키는 함수이다.
리듀서는 두가지 파라미터를 받아온다.

function reducer(state, action) {
	return newState;
}

4.스토어(store) 상태관리!!!!

리덕스에서 한 애플리케이션당 하나의 스토어를 만듬
스토어 안에는 현재의 상태와, 리듀서, 내장 함수들이 있음

ex) dispatch(), subscribe(), getState()

*스토어 생성하기

const store = Redux.createStore(리듀서함수)

*상태값 접근하기(반환하기 내장함수)

store.getState()

*상태값 변경하기 내장함수 - reducer를 호출

store.dispatch({
	type:""
})

5. 구독(subscribe) --- react에서는 알아서 랜더링 해줌(거의 사용 안함) 보여주기 용

스토어의 내장함수 중 하나이다
함수 형태의 값을 파라미터로 받아오며 subscribe함수에
특정함수를 전달하면 액션이 디스패치 될때마다 전달해준 함수가 호출됨

store.subscribe(함수)

Redux 장점

1. 상태를 예측 가능하게 만듬!!

2. 유지보수

3. 디버깅에 유리!!!

(redux dev tool: 크롬 확장프로그램 사용) ↓↓↓↓↓ 맨아래에 링크 있음

자바스크립트에서 리덕스 이용하기!!!!

https://cdnjs.com/libraries/redux

redux - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

Predictable state container for JavaScript apps - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare

cdnjs.com

들어가서 아래와 같이 header 태그안에 스크립트 링크를 복사 붙여넣기 해준다 (위에 min붙은건 내용 축소 )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js"></script> 
    <!-- 설치안하고 사용한다 -->
</head>
<body>

실습

redux.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.1/redux.min.js" 
    integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrP
    Vv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
    <h1 id="number">0</h1>
    <button id="increment">+</button>
    <button id="decrement">-</button>
    <script>
        //초기값 설정
        const initialState = {
            number: 0
        }
        //리듀서 함수
        function reducer(state= initialState, action) {
            switch(action.type){
                case "INCREASE":
                    return {
                        number: state.number + 1
                    }
                case "DECREASE":
                    return {
                        number: state.number - 1
                    }
                default: 
                    return state;        
            }
        }

        //스토어 생성
        const store = Redux.createStore(reducer,
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
        //액션 생성 함수  --- 액션 객체를 리턴
        const increment = () => ({ type: "INCREASE"})  
        /// 소괄호 쓰는 이유 중괄호 리턴 생략되고 객체인지 알려주려고
        
        const decrement = () => ({ type: "DECREASE"})
       
        const numberEle = document.querySelector("#number")
        const btnIn = document.querySelector("#increment")
        const btnDe = document.querySelector("#decrement")
        const render = () => {
            numberEle.innerHTML = store.getState().number
            console.log("render호출됨")
        }
        //스코어 구독
        store.subscribe(render);
        console.log(store.getState())  //초기값 객체 나옴
        //버튼 클릭시 상태값 업데이트 (액션발생 -> dispatch)
        btnIn.addEventListener("click", () =>{
            store.dispatch(increment())
            //store.dispatch({type: "INCREASE"}) 액션함수를 만들어놈 위에랑 기능 똑같음
        })
        btnDe.addEventListener("click", () =>{
            store.dispatch(decrement())
            //store.dispatch({type: "DECREASE"}) 액션함수를 만들어놈 위에랑 기능 똑같음
            console.log(store.getState().number)
        })

    </script>
</body>
</html>

리덕스 참고 깃허브 사이트

https://github.com/reduxjs/redux-devtools/tree/main/extension

GitHub - reduxjs/redux-devtools: DevTools for Redux with hot reloading, action replay, and customizable UI

DevTools for Redux with hot reloading, action replay, and customizable UI - GitHub - reduxjs/redux-devtools: DevTools for Redux with hot reloading, action replay, and customizable UI

github.com

리덕스 크롬 확장 프로그램 - 상태, 차트, 구조 등등 다양하게 확인 가능

redux devtools

https://chrome.google.com/webstore/detail/redux-devtools-next/oamphgegmigmlgkdnijmeomjenbmkbdg?hl=ko

Redux DevTools - Next

Redux DevTools for debugging application's state changes.

chrome.google.com

설치

npm install @redux-devtools/extension

rootReducer와 함께 store에 넣어준다

import { devToolsEnhancer } from '@redux-devtools/extension';

const store = createStore(rootReducer, devToolsEnhancer())

react with redux!!!!! 리액트와 리덕스 같이 사용하면

설치

npm install redux
npm install react-redux
npm install @redux-devtools/extension

1. 리덕스 모듈 만들기

(액션타입, 액션 생성함수(있어도 되고 없어도됨), 리듀서가 포함되어있는 자바스크립트 파일)

2. rootReducer만들기

(모듈들을 하나로 합쳐서 사용할 수 있음)

3. 스토어 생성

createStore(리덕스 모듈)
****모든 컴포넌트에서 store 사용할 수 있도록 설정

import { legacy_createStore as createStore } from 'redux';
import rootReducer from './modules';
import { Provider } from 'react-redux';

const store = createStore(rootReducer)

<Provider store = {store}>
	<App/>
</Provider>

4. 컴포넌트 만들기

컨테이너 컴포넌트
리덕스 스토어의 상태를 조회하거나, 액션을 디스패치 할 수 있는 컴포넌트
다른 프리젠테이셔널 컴포넌트 불러와서 사용

!!!!!!!!!!상태관리!!!!!!!!!

1) useDispatch()

상태 업데이트를 요청할 dispatch리턴

const dispatch = useDispatch()
dispatch({액션객체})

과정은

dispatch가 호출된다면!!!!
액션 발생 →→ 리듀서 호출 →→ 상태 업데이트

2) useSelector()

useSelector((state)=>state.number)

매개변수로 상태를 받고 연관되어있는 상태값을 리턴해줌

컨테이너 컴포넌트에서 프리젠테이셔널 컴포넌트에 props로 전달!!!!!!

프리젠테이셔널 컴포넌트

리덕스 스토어에 직접적으로 접근하지 않고 필요한 값은 props로 받아와서 사용하는 컴포넌트
UI를 선언하는 것에 집중(ex.<div><h2></h2></div>)