예제를 만들어보고 TEST를 해보면서 Flux구조에 대해서 이해를 조금 더 해보려고 한다.

우선, react가 기본적으로 갖고 있는 useContext를 사용해서 예제를 만들어보려고 한다.

✨ Counter 예제 만들기

1. state로 카운터 예제 만들기.

import { useState } from "react";
function App() {
  const [counter, setCounter] = useState(0);
  const increase = () => {
    setCounter(counter + 1);
  };
  const decrease = () => setCounter(counter - 1);
  return (
    <div className="App">
      <h1>{counter}</h1>
      <div>
        <button onClick={counter >= 10 ? undefined : increase}>Plus</button>
      </div>
      <br />
      <div>
        <button onClick={counter <= 0 ? undefined : decrease}>Minus</button>
      </div>
    </div>
  );
}
export default App;

counter라는 state에 increase는 1씩 더하고, decrease는 1씩 빼고, 가능 범위를 0-10으로 지정했음.

2. Flux 구조로 카운터 예제 만들기.

1. Action 생성자 만들기

const reducer= (state,action) => {
	switch(action.type){
    	case "INCREASE" :
        return state+1;
        case "DECREASE" :
        return state -1;
    }
}

이게 아까 공부한 action생성자임. 전역 state로 사용할

• INCREASE , DECREASE

두가지가 있음.

• INCREASE : state +1
• DECREASE : state -1

이렇게 전역 state들을 바꿔주길 바람. 이렇게 Dispatch에게 전달함.

2. useReducer로 dispatch 사용하기.

const [state, dispatch] = useReducer(reducer, initialArg, init);

이렇게쓰면됨,

const [state, dispatch] = useReducer(reducer, initialArg, init);

• state = 0(초기값)
• dispatch 함수의 callback => reducer

useReducer를 통해서 이렇게 사용하는게 가능해짐.
그럼 지금까지 action 생성자를 만들어서, useReducer를 통해 dispatch의 콜백함수에 reducer를 사용하게 만들어줬다.

3. dispatch 함수 적용하기

const increase =() => dispatch({type:"INCREASE"});
const decrease =() => dispatch({type: "DECREASE"})

클릭 하면 state+1이 되는 increase 함수와, state -1 되는 decrease 함수를 만들어줬다. useRecuder로 dispatch는 reducer함수를 바로 콜백으로 받을 수 있다.

4. Store 결정

// useReducer 안 로직
const increase =() => dispatch((0,{type:"INCREASE"}) => {
	switch(action.type){
    	case "INCREASE" :
        return state+1;
        case "DECREASE" :
        return state -1;
    }
})

INCREASE와 DECREASE를 갖고 있는 store는 INCREASE인지 DECREASE인지 잡아내서 상태값을 바꿔준다.

5. Console 확인

1. Rendering
   {plus OnClick}
2. increase 함수 타기 시작
3. dispatch => reducer함수 탐
4. increase 함수 나옴.
5. reducer함수 또 탐.
6. Rendering

6. Context로 전역에서 사용하기

 export const CounterContext = createContext();
 function App(){
 {...reducer function 생략}
 const [state,dispatch]= useReducer(reducer,0);
 {...생략}
 return<CounterContext.Provider value={state,dispatch}>
  </CounterContext.Provider>}

createContext 생성해서 provider 제공할 수 있게 만들고, Provider로 감싸고 value로 useReducer로 가져온 state, dispatch 보내주기.

App > Children.js > GrandChildren.js 구조

 //GrandChildren.js
import { useContext } from "react";
import { CounterContext } from "./App";
export default function GrandChildren() {
  const { state } = useContext(CounterContext);
  return (
    <div>
      <h3>This is GrandChildren Section</h3>
      <p>State : {state}</p>
    </div>
  );
}

✨ 완성!!

다음 포스팅은 내가 만들었던 코드 Flux 구조로 다시보는 작업!