[REACT] React로 캘린더 만들기 (1) - Header에서 현재 날짜와 달을 표시하기

이런 캘린더를 한번 만들어보자!

 

 

1. 프로젝트 생성

yarn create react-app calendar

프로젝트를 생성한다.

 

 

 

 

2. styled-components , moment 설치

yarn add styled-components
yarn add moment

 

 

 

3. 폴더구조

일단 이렇게 만들어줬다.

• pages -> 한 페이지
• components -> 중간 단위의 컴포넌트
• elements -> 최소 단위 컴포넌트

 

 

 

4. 최소단위 컴포넌트

일단 text 컴포넌트와 버튼 컴포넌트를 만들어보겠다.

Text 컴포넌트

elements/Text.js

import React from "react";
import styled from "styled-components";
 
const Text = (props) => {
  const { bold, color, size, children, margin } = props;
 
  const styles = {bold: bold, color: color, size: size, margin};
  return (
      <P {...styles}>
          {children}
      </P>
  )
};
 
Text.defaultProps = {
  children: null,
  bold: false,
  color: "#222831",
  size: "14px",
  margin: false,
};
 
const P = styled.p`
  color: ${(props) => props.color};
  font-size: ${(props) => props.size};
  font-weight: ${(props) => (props.bold? "600" : "400")};
  ${(props) => (props.margin? `margin: ${props.margin};` : '')}
`;
 
export default Text;
 

 

Button컴포넌트

elements/Button.js

import React from "react";
import styled from "styled-components";
 
const Button = (props) => {
  const { text, _onClick, is_float, children, margin, width,padding } = props;
 
  if (is_float) {
    return (
      <React.Fragment>
        <FloatButton onClick={_onClick}>{text? text : children}</FloatButton>
      </React.Fragment>
    );
  }
 
  const styles = {
    margin: margin,
    width: width,
    padding: padding,
  };
 
  return (
    <React.Fragment>
      <ElButton {...styles} onClick={_onClick}>{text? text: children}</ElButton>
    </React.Fragment>
  );
};
 
Button.defaultProps = {
  text: false,
  children: null,
  _onClick: () => {},
  is_float: false,
  margin: false,
  width: '100%',
  padding: "12px 0px",
};
 
const ElButton = styled.button`
  width: ${(props) => props.width};
  background-color: #212121;
  color: #ffffff;
  padding: ${(props) => props.padding};
  box-sizing: border-box;
  border: none;
  ${(props) => (props.margin? `margin: ${props.margin};` : '')}
`;
 
const FloatButton = styled.button`
  width: 50px;
  height: 50px;
  background-color: #212121;
  color: #ffffff;
  box-sizing: border-box;
  font-size: 36px;
  font-weight: 800;
  position: fixed;
  bottom: 50px;
  right: 16px;
  text-align: center;
  vertical-align: middle;
  border: none;
  border-radius: 50px;
`;
 
export default Button;
 

 

elements/index.js

import Text from "./Text";
import Button from "./Button";
 
export {Text, Button};

index.js를 만들어서 export를 한번에 해줄 수 있도록 만든다

 

 

---

 

5. Header와 Calendar만들기

components/Header.js

import React from "react";
import {Text} from "../elements"
import styled from "styled-components";
 
const Header = (props) =>{
    const { calendarYM, today} = props;
 
    return(
        <React.Fragment>
            <Container>  
                <Text>{calendarYM}</Text>
                <Text>{today}</Text>
            </Container>
        </React.Fragment>
    );
}
 
const Container = styled.div`
    flex-basis: 50px;
    background-color: tomato;
`;
 
export default Header;

 

이부분이 Header이다.

여기서 props에서 받아오는 값은 밑에서 설명!

 

 

components/Calender.js

import React from "react";
import styled from "styled-components";
 
const Calendar = (props) =>{
    return(
        <React.Fragment>
            <Container>
 
            </Container>
        </React.Fragment>
    );
}
 
const Container = styled.div`
    flex-grow: 1;
    background-color: lightgray;
 
`;
 
export default Calendar;

이 부분에 들어갈 것이 Calendar이다.

일단은 색상으로 구분을 해두었다.

 

이것도 index.js로 엮어서 export해주도록 했다.

 

---

 

6. page만들기

pages/FullCalendar.js

import React from "react";
import { Header, Calendar } from '../components';
import moment from "moment";
import styled from "styled-components";
 
function FullCalendar() {
    const [calendarYM , setCalendarYM] = React.useState("");
    const [today , setToday] = React.useState("");
  
    React.useEffect(()=>{
      setCalendarYM(moment().format("YYYY년 MM월"));
      setToday(moment().format("현재 YYYY - MM - DD"));
    },[]);
  
    return (
        <Layout >
          <Container>
            <Header
                calendarYM = {calendarYM}
                today= {today}
              />
            <Calendar/>
          </Container>
        </Layout>
    );
  }
 
  const Layout = styled.div`
        width: 100vw;
        height: 80vh;
        border: 1px solid black;
  `;
  const Container = styled.div`
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  `;
  export default FullCalendar;

요것이 전체 화면이다.

여기서 moment로 현재 날짜를 가져와서 Header에 넘겨주고 있다.

 

 

App.js

import React from "react";
import FullCalendar from "./pages/FullCalendar";
 
 
function App() {
  
  return (
      <FullCalendar/>
  );
}
 
export default App;
 

 

App.js에서 부른다.

 

<결과>

이렇게 현재 날짜를 잘 불러왔다.