[React TodoList] 프로젝트 준비, UI 구성하기

1. 프로젝트 준비

프로젝트 생성 및 라이브러리 설치

//프로젝트 생성
npm create react-app Todo

//라이브러리
npm install node-sass
npm install classnames
npm install ract-icons

 

Prettier 설정 

루트 디렉터리 .prettierrc 파일 생성

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}

 

 

index.css 수정

body {
  margin: 0;
  padding: 0;
  background-color:azure;
}

 

App.js 컴포넌트 초기화

import React from 'react';

const App = () => {
  return (
    <div> Todo 
      
    </div>
  );
};

export default App;

 

 

 

2. 컴포넌트 구성

1. TodoTemplate
                           : 화면을 가운데에 정렬, 일정관리 보여주고 chileren으로 내부 JSX를 props로 받아와서 렌더링
2. TodoInsert
                           : 새로운 항목을 입력하고 추가하는 컴포넌트, state를 통해 인풋 상태 관리한다. 
3. TodoListItem
                           : 각 할 일 항목에 대한 정보를 보여주는 컴포넌트, todo 객체를 props로 받아 와서 UI 보여준다. 
4. TodoList
                           : todos 배열을 props로 받아 온 후, 배열 내장 함수 map을 사용해 반복 데이터를 레터링한다.

 

 

3. 컴포넌트 제작

TodoTemplate.js

import React from 'react';
import "./TodoTemplate.scss"

const TodoTemplate = ({children}) => {
  return (
    <div className='TodoTemplate'>
      <div className='app-title'>일정 관리</div>
      <div className='content'>{children}</div>
    </div>
  );
};

export default TodoTemplate;

 

App.js

import React from 'react';
import TodoTemplate from './TodoTemplate'

const App = () => {
  return (
    <TodoTemplate> Todo 프로젝트 초기 설정 </TodoTemplate>
  );
};

export default App;

 

TodoTemplate.scss

.TodoTemplate{
  width:512px;
  margin-top: 6rem;
  margin-left: auto;
  margin-right: auto;
  border-radius: 4px;
  overflow: hidden;

  .app-title{
    background-color: #22b8cf;
    color :white;
    height: 4rem;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .content{
    background-color: white;
  }

}