개인과제 완성 및 잘 안 풀렸던 것 정리

오늘 잘 안 풀렸던 것 : 컴포넌트 나누기 과정

1. filter가 안 먹히는 에러

= 돌고 돌아 찾았는데 알고 보니 map을 두 파일에서 동시에 하고 있어서 이중 map이 되고 있어서 였다.

2. 도저히 나눠지지 않았던 Todo와 List

주요코드(Todo.jsx)

const Todo = ({obj, onDeleteHandler, onDoneHandler}) => {
	return (
		<div className="todo-container">
		<div>
					<>
					{/* 여기 맵은 필요 없다. 아래 구문도 3항 연산자로 하나로 묶어버린다 */}
					
							<div> <h2 className="todo-title">{obj.title}</h2>
										<p>{obj.content}</p>
							 </div>
							<div className="button-set">
							<button type="button" className="todo-delete-button button" onClick={()=>{onDeleteHandler(obj.id)}}>삭제</button>
							<button type="button" className="todo-complete-button button" onClick={()=>{onDoneHandler(obj.id)}}>{obj.isDone ? "취소" : "완료"}</button>
							</div>
					
					</>
</div>
</div>

주요코드(List.jsx 중 투두리스트 false part)

return(
<div className="list-container">
  <h2>
    Working
    </h2>
    <div className="list-wrapper">
					<>
					{todoList.filter((i) => !i.isDone).map((item) =>{
						return  <Todo key={item.id}
                          obj = {item}
                          // 2중 필터 돌지 말기.
                          // 아예 객체로 받아준다.(그러면 다 들어감)
                          onDeleteHandler={onDeleteHandler}
                          onDoneHandler={onDoneHandler}/>
					})}
					</>
</div>

1. 잘 보면 Todo라는 아들 컴포넌트를 List가 받아와서 실행시킨다. Todo는 리스트 단지 하나만 만들고 List는 그걸 만들어서 뿌리는 큰 역할이란것을 이해하는게 첫번째.

2. 두번째는 네이밍. 어짜피 객체로 가져올 것이므로 전체를 obj로 놓고 들고 간다. (obj = {item}) 이후 이걸 props로 Todo에 줘서 title, content를 연결하면 그만.

3. 멘토님 설명 코드

import React, { useState } from "react";

const Child = (props) => {
  return (
    <div>
      <strong>{props.title}</strong>
      <p>{props.content}</p>
    </div>
  );
};
===============================이상 차일드 컴포넌트라 가정한 코드
const Counter = () => {
  const [list, setList] = useState([
    { title: "타이틀", content: "상세내용" },
    { title: "타이틀", content: "상세내용" },
    { title: "타이틀", content: "상세내용" },
  ]);

  return (
    <div>
      <h1>컴포넌트 예제</h1>

      {list.map((item) => {
        return <Child data={item} />;
      })}
    </div>
  );
};

export default Counter;

잘 읽어보면 네이밍할 때 props에 어떤식으로 연결되어야 하는지 감이 올 것이다. 자꾸 코드를 눈에 익혀야겠다.

3. 왜 나는 a를 완료했는데 b와 위치가 바뀌는가?

문제 조건 상 단순 todolist가 아니라 카드형이었기 때문에 일어난 일이었고 초기값으로 준 카드를 인데스를 0, 1로 변경했더니 해결되었다. => 디폴트값이 0으로 시작한 걸 잊어서였던 듯.

배포 결과

잘 됐다.

이제 깃허브 리드미나 잘 써놔야겠다.
깃허브 완성 내용
완성본 배포 주소