React - Redux란? (저장소 store, 액션 action, 리듀서 reducers, 미들웨어 middleware) + Clock 실시간 시계만들기

안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)

yeonee 블로그 : 네이버 블로그

 

 

* Redux란?

(+ 리덕스 구성요소 - 저장소 store, 액션 action, 리듀서 reducers, 미들웨어 middleware)

    Redux?
    state같은 경우 각 컴포넌트의 상태를 관리했다면, Redux는 
    전체적인 애플리케이션의 상태를 관리하는 패키지로 모든 컴포넌트에서
    공유하는 앱 상태(state)를 다룰 수 있다.

    리덕스 구성요소 : 저장소(store), 액션(action), 리듀서(reducers), [미들웨어(middleware)]

    저장소 : 앱의 상태를 저장하는 저장소. 애플리케이션당 한개만 존재하며
             configureStore()에 의해 생성되면서 리듀서와 결합함.
             useSelector(state)훅을 통해 저장소의 상태(state)를 가져올수 있음.

    액션   : 개발자가 만드는 객체로, useDispatch훅을 통해 저장소로 action을 전달
    
    리듀서 : 현재 앱상태(oldstate)와 액션객체 2가지를 매개변수로 입력받는 함수로,
            상태값 + 액션을 결합하여 새로운 상태(newState)를 저장소로 전달해준다.

    미들웨어 : 액션을 dispatch함수로 전달하고, 리듀서가 실행되기전과, 실행된후
              처리되는 기능

 

import {configureStore} from '@reduxjs/toolkit';
import {Provider as ReduxProvider} from 'react-redux';
import Clock from './Clock';
import CallMiddleware from './callMiddleware';

// 타이머(시계앱)
const initialAppState = {today : new Date()};

const rootReducer = (state = initialAppState, action) => { //;첫번째 매개변수인 state값이 undifined값을 가질때 initialAppState값을 가진다.
/*
    첫번째 매개변수 Appstate의 초기값은 initialAppstate로 셋팅
    두번째 매개변수 action은 내부의 값중 속성명(type)이 반드시 있어야만하는 객체

    action에 type속성을 반드시 추가하는 이유는 리듀서함수의 몸통에서 switch문으로
    분기처리를 하기 위해서.
*/
    switch(action.type){
        case 'setToday' :
            return {...state, today : action.today}
        case 'action_type2' :
            return {...state}; //;깊은복사
    }
    return state;
}

//저장소 만들기
const store = configureStore({ reducer : rootReducer , middleware:[] }); //;CallMiddleware

export default function ReduxApp(){ //;최상위부모객체
    return(
        <ReduxProvider store={store}>
            <Clock/>
        </ReduxProvider>
    )
}

+ Provider 는 react-redux 라이브러리에 내장되어 있는, 리액트 앱에 store 를 손쉽게 연동할 수 있도록 도와주는 컴포넌트입니다. 이 컴포넌트를 불러온 다음에, 연동할 컴포넌트를 감싸준 다음에 Provider 컴포넌트의 props로 store 값을 설정해주면 됩니다.

 

 

* Selector() 와 Dispatch() 란?

    useSelector() ? 리덕스 저장소에 저장된 특정 상태를 얻어올때 사용

    useDispatch() ? 액션을 저장소로 운반하는 역할
                    Reducer의 두번째 매개변수로 action객체를 전달시켜줌

 

import { useSelector , useDispatch } from "react-redux";
import { useEffect } from "react";

export default function Clock(){
    // 초기값으로 셋팅해두었던 today상태값 얻어오기
    const today = useSelector( (state) => state.today ); //; ({today}) => today 구조분해할당으로 이렇게도 쓰임.

    const dispatch = useDispatch(); // dispatch함수 얻어오기.

    /*
        interval함수를 활용하여 dispatch함수를 호출함
        새로운 시간을 설정하는 액션 객체를 리듀서에 두번째 매개변수로 전달     //; 01_Redux.js파일에 있는 'const rootReducer = (state = initialAppState, action) => {' 부분에서 'action'부분
    */
    useEffect( () => {
        const id = setInterval(
            () => {
                dispatch( {type : "setToday" , today: new Date()}); //;reducer가 store로 전달을 해준다. 01_Redux.js파일에 있는 today를 불러와서 시간이 흐름
                dispatch( {type : "action_type2" , today: new Date()}); //;reducer가 store로 전달을 해준다. 01_Redux.js파일에 있는 불러올 today가 없어서 시간이 흐르지 않음.
            } //; 시간초 안주면 최소 0.1초 처리됨
        )
        return () => clearInterval(id)
    },[])

    // useSelector훅을 사용하여 현재시간을 저장소에서 꺼낸후 화면에 출력하기.
    return(
        <div className="flex flex-col items-center justify-center mt-16">
            <h1 className="text-5xl">Clock</h1>
            <p className="mt-4 text-3xl">{today.toLocaleTimeString()}</p>
            <p className="mt-4 text-2xl">{today.toLocaleDateString()}</p>
        </div>
    )

}