2024.05.28 Today Yoonsung Learned

TIL

리액트 숙련 개인과제

1. 컴포넌트 나누기

• 메인페이지 Home, 서브페이지 ExpenseDetail
  

2. 필수 구현 사항

• styled-components 를 이용하여 스타일링

/* 스타일 컴포넌트 추가 */
yarn add styled-components

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  /* reset CSS */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* 공통 스타일 */
  body {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: #f5f5f5;
  }
`;

export default GlobalStyle;

• react-router-dom 을 이용해서 페이지 전환

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
  const [currentMonth, setCurrentMonth] = useState(new Date().getMonth() + 1);

  return (
    <Provider store={store}>
      <ExpenseProvider>
        <GlobalStyle />
        <Router>
          <Routes>
            <Route
              path="/"
              element={
                <Home
                  currentMonth={currentMonth}
                  onChangeMonth={setCurrentMonth}
                />
              }
            />
            <Route path="/detail/:id" element={<ExpenseDetail />} />
          </Routes>
        </Router>
      </ExpenseProvider>
    </Provider>
  );
}

export default App;

• useState, useEffect, useRef 사용

• 지출 항목 등록 시 id는 uuid 라이브러리를 이용

yarn add uuid

• 유효성 검사

const handleDelete = () => {
    if (window.confirm("정말 삭제하시겠습니까?")) {
      setExpenseData((prevData) => prevData.filter((item) => item.id !== id));
      dispatch(deleteExpense(id));
      navigate("/");
    }
  };