리액트 투두리스트 만들기 (2편) : List UI 만들기

 

UI 완성본

 

 

오늘은 UI 만들기 마지막편입니다. 

 

먼저 List.jsx를 만들어줍니다. 

하단에 있는 Todo...들이 보이죠 ? 여기를 만들거에요 

 

---

 

 

import "./List.css";
import TodoItem from "./TodoItem";

const List = () =>{
    return <div className="List">
        <h4>Todo List🍀</h4>
        <input placeholder="검색어를 입력하세요"/>
        <div className="todos_wrapper">
            <TodoItem/>
            <TodoItem/>
            <TodoItem/>
        </div>
    </div>
}

export default List;

 

TodoItem은 따로 컴포넌트로 빼줍니다. 

 

 

 

< TodoItem.jsx > 

import './TodoItem.css';

const TodoItem = () =>{
    return (
    <div className="TodoItem"> 
        <input type="checkbox"/>
        <div className="content">Todo...</div>
        <div className="date">Date</div>
        <button>삭제</button>
    </div>
    );
}
export default TodoItem

 

 

 

List.css 와 TodoItem.css도 각각 만들어줍니다.

<List.css>

.List{
    display: flex;
    flex-direction: column;
    gap:20px;
}

.List > input {
    width : 100%;
    border : none;
    border-bottom: 1px solid rgb(220,220,220);
    padding : 15px 0px;
}


.List > input:focus{
    outline:none;
    border-bottom: 1px solid rgb(37, 147, 255);
}

.List .todos_wrapper{
    display: flex;
    flex-direction: column;
    gap : 20px;
}

 

 

 

<TodoItem.css>

.TodoItem{
    display: flex;
    align-items: center;
    gap : 20px;
    padding-bottom: 20px;
    border-bottom:1px solid rgb(240,240,240);
}

.TodoItem input{
    width: 20px;
}
.TodoItem .content{
    flex : 1;
}

.TodoItem .date{
    font-size : 14px;
    color : gray;
}

.TodoItem button{
    cursor: pointer;
    color : gray;
    font-size : 14px;
    border : none;
    border-radius: 5px;
    padding : 5px;
}

 

 

 

 

 

그러면 이렇게 리스트들이 잘 나오죠? ㅎㅎ 

 

이것으로 UI 만들기는 끝났습니다. 

다음 글부터는 기능을 구현해보겠습니다. 

 

이렇게 UI를 만들면서 css의 신기함과 소중함을 알수있었습니다.

css가 없었다면 정말 둔탁하달까요 .. 투박한 사이트 일텐데 

조금의 코드만으로 깔끔한 모양을 찾아가는게 재밌었습니다. 

 

 

특히 많이 사용했던 css인 

 

 

display : flex; 

와 flex-direction:column; 등을 익힐수있어서 재밌었습니다.

혼자 코딩할 때는 css를 공부해본것이 아니라서 거의 까막눈이거든요 .. ㅎㅎ 

 

 

다음에 배워볼 기능구현도 기대가 됩니다!