[쿠킹레시피] Context 와 Provider 만들어 적용하기, 리듀서 함수 적용

 

 

import { createContext } from "react";

export const ThemeContext = createContext();

//children은 하위 컴포넌트를 의미한다.
//컨텍스트.프로바이더에서 value값을 전역으로 제공한다.
export function ThemeProvider({ children }) {
  return (
    <ThemeContext.Provider value={{ color: "blue" }}>
      {children}
    </ThemeContext.Provider>
  );
}

 

 

 

 

 

테스트로 Navbar.jsx에서 네브바 컬러를 바꿔봤다. 

 

 

 

 

리듀서 함수를 추가한다.

import { createContext, useReducer } from "react";

export const ThemeContext = createContext();

const themeReducer = (state, action) => {
  switch (action.type) {
    case "CHANGE_COLOR":
      return { ...state, color: action.payload };
    default:
      return state;
  }
};

//children은 하위 컴포넌트를 의미한다.
//컨텍스트.프로바이더에서 value값을 전역으로 제공한다.
export function ThemeProvider({ children }) {
  //리듀서는 state  , dispatch로 업데이트
  const [state, dispatch] = useReducer(themeReducer, { color: "#fea1a1" });
  const changeColor = (color) => {
    dispatch({ type: "CHANGE_COLOR", payload: color });
  };
  return (
    <ThemeContext.Provider value={{ ...state, changeColor }}>
      {children}
    </ThemeContext.Provider>
  );
}

 

 

useReducer 는 항상 state 와 dispatch 

themeReducer 함수를 만들어줘야함 

action의 type이 CHANGE_COLOR면 action의 payload로 컬러를 바꿔라

payload는 dispatch로 변경한다. 

 

 

테스트를 위해서 

네브바를 클릭하면 네브바 색상이 바뀌도록 수정해본다

.

 

 

<기존>

 

<네브바 클릭 시 >

 

 

ThemeSelector.css, jsx 생성

 

 

ThemeSelector. jsx 

import React, { useContext } from "react";
import "./ThemeSelector.css";
import { ThemeContext } from "../context/ThemeContext";

//테마색 3가지로 정함
const themeColors = ["#fea1a1", "#FFCD4B", "#89CFF3"];

export default function ThemeSelector() {
  const { changeColor } = useContext(ThemeContext);

  return (
    <div className="theme-selector">
      <div className="theme-buttons">
        {themeColors.map((color) => (
          <div
            key={color}
            onClick={() => changeColor(color)}
            style={{ background: color }}
          />
        ))}
      </div>
    </div>
  );
}

 

 

 

 

ThemeSelector.css

.theme-selector {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  max-width: 1200px;
  margin: 20px auto;
}
.theme-buttons div {
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin-left: 15px;
  border-radius: 50%;
}

 

 

 

 

테마색을 정한 후에 그것을 map 반복문으로 실핸한다. 

클릭하면 해당 색상으로 네브바 색상이 바뀐다. 

 

 

 

 

 

 

 

 

아까 테스트를 위해서 작성했던 부분을 수정한다.

Navbar.jsx