가계부 만들기 1

본격적으로 가계부 만들기 시작!... 근데 어렵다.

 

1. 설치

yarn create vite my-react-app --template react

cd my-react-app
yarn
yarn dev

 

 

2. 

yarn add styled-components

 

app.jsx 상단에 추가

import React from "react";
import styled from "styled-components";

 

 

3.

yarn add react-router-dom

 

 

4. 

Pages 폴더 -> Home, Detail.jsx 파일

shared 폴더 -> Router.jsx

 

Router.jsx

import React from 'react';

const Router = () => {
  return <div>Router</div>;
};
export default Router;

 

수정 + 입력

import React from 'react';
import { BrowserRouter, Routes } from 'react-router-dom';

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>

      </Routes>
    </BrowserRouter>
  );
};
export default Router;

 

Routes 내부에 입력, 상단에 import 추가

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from '../pages/Home';

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
};
export default Router;

경로 뒤에 아무것도 없으면 Home 컴포넌트가 보인다.

 

일단 여기까지 만들고 다시 app.jsx로 이동했다.

 

5.

전체에 적용될 스타일이 필요해서

GlobalStyles.js 파일을 만들어서,

import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
  body {
    background-color: #2ec4b6;
    width: 1280px;
  	margin: 0 auto;
  	padding: 2rem;
  }
`;


export default GlobalStyles;

이렇게 만들어주고

import GlobalStyles from './GlobalStyles';

app.jsx에 연결.

 

일단 app.jsx 파일에 줄줄이 쓰다가 너무 길어져서 파일을 분리했다.

 

이름은 일단 막 지었고, 2개로 나눴다.

 

6.

import styled from 'styled-components';

요고 빼먹지 말기.

<Container>
      <Container2>
        <Form>
          <Box>
            <label htmlFor="date">날짜</label>
            <Input type="date" id="date" placeholder="YY-MM-DD" />
          </Box>
          <Box>
            <label htmlFor="item">항목</label>
            <Input type="text" id="item" placeholder="지출 항목" />
          </Box>
          <Box>
            <label htmlFor="amount">금액</label>
            <Input type="number" id="amount" placeholder="지출 금액" />
          </Box>
          <Box>
            <label htmlFor="description">내용</label>
            <Input type="text" id="description" placeholder="지출 내용" />
          </Box>
          <Box>
            <SaveBtn>저장</SaveBtn>
          </Box>
        </Form>
      </Container2>
    </Container>

그리고 이렇게 만들어 줬다.

 

7.

다른 파일도 마찬가지로, 똑같이 분리한다.

const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

const Month = () => {
  let [SaveMonth, setMonth] = useState('');

  function MonthSaveFunc(month) {
    setMonth(month);
  }

일단 이런 식으로 만들어서 months을 맵으로 돌려 하나 하나 뿌려주고,

클릭한 버튼에 각 요소를 구별하는 key값으로 index를 준다.

 

그리고 버튼에 onClick을 연결해 버튼을 클릭하면 MonthSaveFunc 함수가 실행되고 month를 넘겨줬다.

month를 받은 MonthSaveFunc 함수는 setMonth에 받은 month를 주어 업데이트!