[깃허브 앱] Alert 컨텍스트

현재 내용을 입력해주세요 메세지가 출력되는 해당 Alert을 컨텍스트로 만들어보겠음. 

 

 

AlertReducer.js

function AlertReducer(state, action) {
  switch (action.type) {
    case "SET_ALERT":
      return action.payload;
    case "REMOVE_ALERT":
      return null;
    default:
      return state;
  }
}

export default AlertReducer;

 

 

 

AlertContext.jsx

import { createContext, useReducer } from "react";
import AlertReducer from "./AlertReducer";

const AlertContext = createContext();

export const AlertProvider = ({ children }) => {
  const initialState = null;

  //문자열 경고창 내용
  const [state, dispatch] = useReducer(AlertReducer, initialState);

  //경고창 메세지를 설정하고 3초뒤 제거함
  //msg => 메세지 type=> AlertReducer에 지정한 타입
  const setAlert = (msg, type) => {
    dispatch({
      type: "SET_ALERT",
      payload: { msg: msg, type: type }, // {msg,type}으로 생략가능함
    });

    setTimeout(() => dispatch({ type: " REMOVE_ALERT" }), 3000);
  };

  return (
    <AlertContext.Provider
      value={{
        alert: state,
        setAlert,
      }}
    >
      {children}
    </AlertContext.Provider>
  );
};

export default AlertContext;

 

 

state에는 경고창에 출력될 메세지와 현재 타입을 가지고있음. 

 

 

이 프로바이더를 적용하면 됨 

 

main.jsx

 

 

UserSearch.jsx에서 적용하기

 

 

 

3초뒤에 사라지는지 확인하기 

 

 

 

 

 

 

import React, { useContext } from "react";
import AlertContext from "../../context/alert/AlertContext";

const Alert = () => {
  const { alert } = useContext(AlertContext);
  return (
    alert !== null && (
      <p className="flex items-start mb-2 space-x-2">
        <span>😁</span>
        <span className="flex-1 text-base font-semibold leading-7">
          <strong>{alert.msg}</strong>
        </span>
      </p>
    )
  );
};

export default Alert;

 

 

 

 

App.jsx

 

 

테스트하기 

 

검색창에 아무런 입력을 하지않고 Go버튼을 누를 경우 

내용을 입력해주세요 출력하고 3초뒤에 사라짐