[REACT] 공통 컴포넌트 세팅

버튼 공용 컴포넌트 만들기

const MyButton = ({text, type, onClick})=> {

    //타입 값에 이상한 값이 들어오는 것을 막기
    const btnType = ['positive', 'negative'].includes(type)? type : "default";

    return (
        <button className={["MyButton", `MyButton_${btnType}`].join(" ")} onClick={onClick}>
            {text}
        </button>
    )
}

MyButton.defaultProps = {
    type: "default"
}

export default MyButton;

  <MyHeader headText={'헤더'} 
        leftChild={
          <MyButton text={"왼쪽버튼"} onClick={()=> alert("왼쪽클릭")}/>
        } 
        rightChild={
         <MyButton text={"오른쪽버튼"} onClick={()=> alert("오른쪽클릭")}/>
        }/>
           

const MyHeader = ({headText, leftChild, rightChild})=> {
    return <header>
        <div className="head_btn_left">{leftChild}</div>
        <div className="head_text">{headText}</div>
        <div className="head_btn_right">{rightChild}</div>
    </header>
}

export default MyHeader;

/* 헤더 */

header{
  padding: 20px 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e2e2e2;

}

header > div {
  display: flex;
}

header .head_text{
  width: 50%;
  font-size: 25px;
  justify-content: center;
}

header .head_btn_left{
  width: 25%;
  justify-content: start;
}
header .head_btn_right{
  width: 25%;
  justify-content: end;

}

import "./App.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import New from "./pages/New";
import Edit from "./pages/Edit";
import Diary from "./pages/Diary";

import RouteTest from "./components/RouteTest";
//components
import MyButton from "./components/MyButton";
import MyHeader from "./components/MyHeader";
import React, { useReducer, useRef } from "react";
//⭐reducer
const reducer = (state, action) => {
  let newState = [];
  switch(action.type){
    case "INIT": {
      return action.data;
    }
    case 'CREATE': {
      const newItem = {
        ...action.data
      }
      newState = [newItem, ...state];
      break;
    }
    case 'REMOVE': {
      newState = state.filter((it)=> it.id !== action.targetId)
      break;
    }
    case 'EDIT': {
      newState = state.map((it)=> it.id === action.data.id? {...action.data}: it)

      break;
    }

    default: return state;
  }
  return newState
}
//⭐Context
export const DiaryStateContext = React.createContext();
export const DiaryDispatchContext = React.createContext();


function App() {

  const [data, dispatch] = useReducer(reducer,[])

  const dataId = useRef(0)
  //⭐CREATE
  const onCreate = (date, content, emotion)=>{
    dispatch({
      type: "CREATE", 
      data:{
      id:dataId.current,
      date: new Date(date).getTime(),
      content,
      emotion,
    
    }})
    dataId.current +=1;
  }

//⭐REMOVE
const onRemove = (targetId)=>{
  dispatch({type: "REMOVE", targetId})
}
//⭐EDIT
const onEdit = (targetId, date, content, emotion)=>{
  dispatch({
    type:"EDIT",
    data:{
      id: targetId,
      date:new Date(date).getTime(),
      content,
      emotion,
    }
  })
}

  return (
    //⭐DiaryStateContext 감싸주기, .Provider 꼭 붙이기, value 전달
    <DiaryStateContext.Provider value={data}>
    <DiaryDispatchContext.Provider value={{onCreate, onEdit, onRemove}}>
    <BrowserRouter>
      <div className="App">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/new" element={<New />} />
          <Route path="/edit" element={<Edit />} />;
          <Route path="/diary/:id" element={<Diary />} />;
        </Routes>
        <RouteTest />
      </div>
    </BrowserRouter>
    </DiaryDispatchContext.Provider>
    </DiaryStateContext.Provider>
  );
}

export default App;