학습내용
todolist 보완
후발대 강의 내용을 바탕으로 기존의 투두리스트 보완
const App = () => {
// list
const [list, setList] = useState(initialList);
.
.
.
// 초기 list 데이터
const initialList = [
{ id: uuid(), date: "2022/12/07", todo: "리액트 과제", isDone: true },
{ id: uuid(), date: "2022/12/06", todo: "티켓팅", isDone: false },
{ id: uuid(), date: "2022/12/07", todo: "리액트 심화", isDone: false },
{ id: uuid(), date: "2022/12/06", todo: "자바스크립트 과제", isDone: true },
];
useState
안에 들어있던 초기 데이터를 initialList
에 할당해서 훨씬 가독성 좋은 코드로 변경
숫자에서 uuid()
형식으로 변경
uuid()
Universally Unique IDentifier의 약자로 네트워크상에서 고유성이 보장되는 id를 생성해주는 모듈. 총 1, 3, 4, 5 네 개의 버전이 있는데 4버전이 가장 보편적으로 쓰인다.
App.jsx
const App = () => {
return (
<div className="wrap">
<Header list={list} setList={setList} />
<div className="list-contents">
<Contents list={list} setList={setList} name="working" />
<Contents list={list} setList={setList} name="done" />
</div>
<Footer />
</div>
);
};
Contents.jsx
export default function Contents({ list, setList, name }) {
const component = name === "working" ? true : false;
.
.
.
return (
<>
{list
.filter((todo) => component === !todo.isDone)
.map((todo) => {
return (
<TodoList
todo={todo}
id={todo.id}
isDone={todo.isDone}
handleDelete={deleteList}
handleButton={listButton}
/>
);
})}
</>
);
}
기존에는 <Contents>
컴포넌트에 두 개의 <TodoList>
컴포넌트를 렌더링했었는데, 완료 전/후로 리스트를 분리하기 위해 중복코드를 또 작성해야만 하는 방식이었기 때문에 효율성이 떨어졌다.
현재의 방식은 <TodoList/>
컴포넌트가 아닌 <Contents/>
컴포넌트 자체를 분리해서 props
로 받아오는 name
값을 기준으로 데이터를 분리하는 방식이다.
TodoList.jsx
export default function TodoList({
todo,
id,
isDone,
handleDelete,
handleButton,
}) {
return (
<div className="list">
{isDone ? (
<div className="done-list">
<span className="list-date">{todo.date}</span>
{todo.todo}
</div>
) : (
<div className="todo-list">
<span className="list-date">{todo.date}</span>
{todo.todo}
</div>
)}
</div>
);
}
<TodoList>
컴포넌트를 하나로 통일함에 따라 두 개의 <div>
에 따로 적용했었던 기존의 스타일 역시 <div className="list">
안에서 삼항연산자를 통해 두 가지 스타일로 나누어 적용했다.