9-4. TodoList / TodoListItem 컴포넌트 만들기

송한솔·2023년 5월 16일

목록 보기

50/54

이제 추가한 일정관리 항목이 보이는 TodoList와 그 안의 TodoListItem 컴포넌트를 만들 차례입니다.

먼저 TodoList.js를 만듭니다.

// TodoList.js
import TodoListltem from "./TodoListltem";
import "./TodoList.css";

const TodoList = () => {
    return (
        <div className="TodoList">
            <TodoListltem/>
            <TodoListltem/>
            <TodoListltem/>
        </div>
    );
};

export default TodoList;

여기에서는 별도의 props 전달 없이 TodoListItem을 여러번 불러올 뿐입니다.
레이아웃을 잡기 위함이며, 추후 기능을 추가하고 데이터를 전달할 것입니다.

주의할 점

틀을 먼저 만들기위해 TodoList를 먼저 만든다고 했지만,
import할 TodoListItem 컴포넌트가 생성이 되어있지 않으면 import가 불가능합니다

※ TodoListItem 컴포넌트 자체가 없습니다.
따라서 TodoListItem의 컴포넌트를 먼저 생성합니다.

이렇게 기본적인 컴포넌트를 생성하고 저장해주면

TodoListItem 컴포넌트를 import할 수 있게 됩니다.

이제 TodoListItem.js를 만듭니다.

여기에서도 react-icons를 사용하겠습니다.

// TodoListItem.js
import {
    MdCheckBoxOutlineBlank,
    MdCheckBox,
    MdRemoveCircleOutline
} from "react-icons/md";
import "./TodoListItem.css";

const TodoListltem = () => {
    return (
        <section className='TodoListItem'>
            <div className="checkbox">
                <MdCheckBoxOutlineBlank/>
                <div className="text">할 일</div>
            </div>
            <div className="remove">
                <MdRemoveCircleOutline/>
            </div>
        </section>
    );
};

export default TodoListltem;

App.js를 통해 출력

// App.js
import './reset.css';

import TodoInsert from "./components/TodoInsert";
import TodoTemplate from "./components/TodoTemplate";
import TodoList from './components/TodoList';

function App() {
  return (
    <div>
      <TodoTemplate>
        <TodoInsert/>
        <TodoList/>
      </TodoTemplate>
      
    </div>
  );
}

export default App;

이제 여기에다가 css를 통해 스타일 효과를 주어보겠습니다.

TodoList.css

.TodoList{
    min-height: 320px;
    max-height: 513px;
    overflow-y: auto;
}

.TodoList의 최소 높이는 320px이며
컨텐츠가 추가됨에 따라 513px까지 늘어날 수 있습니다.
그 이상 늘어날 경우 스크롤바가 생성됩니다.(overflow-y: auto;)

할일을 잔뜩 추가할 경우 스크롤바가 생성되는 것을 확인할 수 있습니다.

TodoListItem.css

이제 TodoList에 추가된 할일부분을 스타일링 하겠습니다

.TodoListItem {
    padding: 1rem;
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    border-top: 1px solid #dee2e6; /* 할일 마다 테두리를 넣어줌 */
    
}
.TodoListItem:nth-child(even){
    background-color: #e7e8e9;
}


.TodoListItem .checkbox {
    display: flex;
    flex: 1; /* 필요한 최소 영역을 제외한 차지할 수 있는 영역 모두 차지 */
    align-items: center; /* 세로 중앙 정렬 */
    cursor: pointer;
    
}
.TodoListItem .checkbox svg{/* 아이콘 */
    font-size: 1.5rem;
}

.TodoListItem .checkbox .text {
    margin-left: 0.5rem;
    flex: 1;
}

/* 체크 되었을 때 보여줄 스타일 */
.TodoListItem .checked svg {
    color: #22b8cf;
}

.TodoListItem .checked .text {
    color: #adb5bd;
    text-decoration: line-through;
}


.TodoListItem .remove {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    color: #ff6b6b;
    cursor: pointer;
}

.TodoListItem .remove:hover {
    color: #ff8787;
}