투두앱 만들기 1: TodoTemplate

프로젝트 생성

$ yarn create react-app todo-app

프로젝트 생성 뒤 디렉토리로 이동 후 라이브러리를 설치해줍니다.

$ cd todo-app
$ yarn add styled-components react-icons

스타일 컴포넌트와 리액트 아이콘을 사용 할 예정이므로 설치해주었습니다.

 

App초기화

import React from 'react';

const App = () => {
  return <div>hello todo app</div>
}

export default App;

 

App.js파일에서 기존 컴포넌트의 내용을 삭제하고 위와같이 작성합니다.

yarn start 를 입력하여 문제 없는지 확인해봅니다.

 

TodoTemplate

기본 Template으로 화면을 가운데로 정렬하고 투두앱 타이틀을 보여줍니다.  

 

src에서 components 디렉토리 생성 -> TodoTemplate 디렉토리 생성 -> TodoTemplate.js와 TodoTemplate.styles.js 파일을 생성해 줍니다. 

 

 

TodoTemplate.js

import React from 'react';
import {ToDoTemplate,  AppTitle, AppContent } from './TodoTemplate.styles';

const TodoTemplate = ({children}) => {
    return(
        <ToDoTemplate>
            <AppTitle>투두앱</AppTitle>
            <AppContent>{children}</AppContent>
        </ToDoTemplate>
    )
}

export default TodoTemplate;

 

 

TodoTemplate.styles.js

import styled from "styled-components";

export const ToDoTemplate = styled.div`
  width: 512px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 6rem;
  border-radius: 4px;
  overflow: hidden;
`;

export const AppTitle = styled.div`
  background: #22b8cf;
  color: white;
  height: 4rem;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
`;

export const AppContent = styled.div`
  background: white;
`;

 

이 컴포넌트를 다시 App.js에서 불러옵니다.

 

 

App.js

import './App.css';
import TodoTemplate from './components/TodoTemplate/TodoTemplate';

const App = () => {
  return <TodoTemplate>hello todo app</TodoTemplate>
}

export default App;

 

 

$ yarn start

hello todo app!