TIL25-02 TodoList 컴포넌트 분리 css 기능 추가

• 컴포넌트를 분리했다. 처음엔 컴포넌트를 어떻게 분리해야할지 막막했고, 어렵게 느껴졌으나 막상 해보니 크게 어렵지 않았다.

아래 코드는 App.jsx 코드이고, 최상위 파일이다. 즉 , 부모 컴포넌트가 되어 자식 컴포넌트에게 props를 넘겨준다. 그리고 import로 자식 컴포넌트의 리턴값들을 받아온다.

import { useState } from 'react';
import './App.css';
import Header from './component/Header';
import Input from './component/Input';
import List from './component/List';

function App() {
   //---- 코드 생략------//
    return (
        <div className="main"> 
            <Header />  //Header,Input,List의 자식 컴포넌트에게 props를 넘겨주었다.
            <Input 
            title={title}
            onTitleHandler={onTitleHandler}
            desc={desc}
            onDescHandler={onDescHandler}
            clickAddButtonHandler={clickAddButtonHandler}
            />
            <List
            list={list}
            setList={setList}
            /> 
        </div>
    );
}

export default App;

List라는 컴포넌트를 만들었고, 그 코드의 일부이다. 이 코드 역시 부모 컴포넌트가 되어 Edit컴포넌트로 props를 넘겨주었다.

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

const List = ({ list,setList}) => { //부모 컴포넌트로 부터 props를 구조분해 할당으로 받아왔다.
    return (
        <div>
            <div className="wd">Working.. 할 일을 추가해보세요!✨</div>
            <div className="backTodoList">
                {list.map((item) => {
                    if (!item.isDone) {
                        return (
                            <Edit key={item.id}  //Edit 자식 컴포넌트에게 props로 넘겨주었다.
                                list={list}
                                item={item}
                                setList={setList}
                            />
                        );
                    }
                })}
            </div>
        </div>
    );
};
export default List;

• 컴포넌트 분할 작업을 마치고, CSS 기능을 몇가지 추가하였다.
  새롭게 알게 된 CSS의 기능들을 정리해보았다.

1. 버튼에 마우스를 올리면 손가락 모양으로 변한다.

.test {
  cursor: pointer;
}

2. 결과이 누적되어 영역을 초과할 때 벗어나지 않고, 밑으로 내려 출력해준다.

.test {
  flex-wrap: wrap;
}

3. 인풋박스에 메세지를 표현해준다. 아래 이미지가 결과물이다.

 <input placeholder='할 일을 입력 해주세요!' type="text"></input>