간단한 TodoList만들기 - (1)

지금 까지 배웠던 것을 적용해서 간단한 todolist를 만드려고 한다.

 

vscode를 열고 깃도 사용하려고 하기 때문에 터미널을 bash로 진행한다

 

$ yarn create react-app todolist

 

명령어를 입력해서 새로운 리액트 프로젝트를 생성한다. 함께 Git 도 연동한다

 

연동되고 나면 이제 시작해보자.

 

먼저 리액트 App.js와 index.css 내용을 지운 후 배경색을 바꿔주자.

 

body{
  background: gray;
}

 

이제 본격적으로 TodoList를 만들자.

src에 compnents 폴더를 만들고 그 안에 만들어지는 컴포넌트를 넣을 것이다. 관습이라고 한다.

 

 

먼저 TodoList가 보일에 해당되는 것들이 보일 template를 만들고 css파일도 만든다.

 

template

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

const TodoTemplate = () => {
    return (
        <div className="todoTemplate">
            <div>오늘 할 일</div>
        </div>
    );
};

export default TodoTemplate;

css

//css
.todoTemplate{
    background: black;
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
    border-radius: 4px;
   
}
.todoTemplate div:nth-child(1){    
    color: honeydew;
    font-size: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
   
}
.todoTemplate div:nth-child(2){    
    background: white;
}

 

이런 이미지가 보인다면 다음 단계로 계속해서 넘어간다. 이제 템플릿 안에 목록 추가를 할 수 있는 컴포넌트와 css를 만든다.

 

todoInsert

//TodoList
import React from 'react';
import './TodoInsert.css'

const TodoInsert = () => {
    return (
        <form className="TodoInsert">
            <input
               placeholder="내용을 입력하세요"
            />
            <button>추가</button>
        </form>
    );
};

export default TodoInsert;

 

css

.TodoInsert{
    display: flex;
    background: white;
}
input{
    background: white;
    outline: none;
    border: none;
    flex:1;

}
button{
    background: rgb(219, 219, 219);
    outline: none;
    border: none;

}

css는 계속해서 바뀔거같다.

 

이렇게 되면 이제 추가된 목록들이 나오는 TodoList, TodoListItem 각각의 css도 같이 만든다.

 

todoList

import React from 'react';
import './TodoList.css'

const TodoList = () => {
    return (
        <div className="TodoList">
            <div>오늘할일 1</div>
            <div>오늘할일 2</div>
            <div>오늘할일 3</div>
        </div>
    );
};

export default TodoList;

 

css

//TodoList.css
.TodoList{
    background: rgb(241, 241, 241)
    
}

css는 계속 바뀐다.

 

이제 TodoListItem.js와. css를 만들자.

 

todoListItem

import React from 'react';
import './TodoListItem.css';

const TodoListItem = () => {
    return (
        <div className="TodoListItem">
            <div className="complate"> 완료 </div>
            <div className="todo">TodoList</div>
            <div className="delete"> 삭제 </div>
        </div>
    );
};

export default TodoListItem;

 

css

.TodoListItem{
    display: flex;

    
}

.complate{
    flex:1;
}

.todo{
    flex:1;
}
.delete{
    flex:1;
}

 

아직은 아무것도 없지만 이제 뼈대는 전부 완성했다. 내용물만 채우면 된다.