7회차과제-김도연

[tkv00]

1.내가 개발한 기능

const TodoListItem = ({ id, body,complete, handleComplete, handleDelete }) => {
  return (
    <Box complete={complete}>
      <p>{body}</p>
      <div>
        <button
          onClick={() => {
            handleComplete(id);
          }}
        >
          완료
        </button>
        <button
          onClick={() => {
            handleDelete(id);
          }}
        >
          삭제
        </button>
      </div>
    </Box>
  );
};

const Box = styled.div`
  background-color: white;
  padding: 5px 15px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  margin-bottom: 15px;
  box-sizing: border-box;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;

  //완료 버튼 눌렀을 때
  text-decoration: ${props => props.complete ? "line-through" : "none"};
  color:${props=>props.complete? "grey":"black"};
`;

Box 컴포넌트에서 props로 complete값을 주어서 styled component Box에서 complete값을 받아 삼항연산자로 Box Component 취소선과 글씨색 변경 구현

2.내가 유의 깊게 개발한 부분

const handleComplete = (id) => {
    const new_Todo = todoList.map((todo) => {
      if (todo.id === id) {
        return { ...todo, completed: !todo.completed };
      } else {
        return todo;
      }
    });
    setTodoList(new_Todo);
  };

1.fake배열에 completed라는 key(default:false)값을 추가.
2.handleComplete에서 map함수를 이용하여 완료버튼을 누른 id와 일치시 completed값을
3.true로 배열 재구성.
4.일치하지않는다면 원래배열 리턴.

3.개발하면서 들었던 의문사항

완료 버튼을 눌러 handleComplete작동 시 component의 스타일 변경을 어떻게 해야할 지 고민 끝에 스타일 변수선언 부분에서 props를 통해 변경할 수 있는 점을 찾았다. 이러한 방법 말고 만약 인라인 함수로 구현이 가능한지에 대해 의문이 들었다.

[ches0703]

열심히 서치 하셔서 props를 사용해 보려고 노력하신게 인상적이네요! 화이팅입니다!

[ches0703]

completed속성이 추가 되었는데, todo추가할 때 해당 속성을 명시하지 않으셨네요.
JS특성상 없는 속성을 참조하면 falsy값인 undefined가 반환되어 자동으로 false로 처리되기 때문에 정상적으로는 작동하지만, 그래도 코드가 복잡해지면 예상치 못한 오류가 발생할 수도 있기 때문에 명시해 주시는 편이 좋을 것 같습니다!

[tkv00]

넵! 알겠습니다! 코드 수정하겠습니다

[ches0703]

팁 아닌 팁이긴 한데, styled-components에서 props를 사용할 때 <Box $complete={complete}>이런식으로 props명 앞에 $를 붙이면 콘솔에서 오류가 안나요!(쓸 때에도 마찬가지로 props => props.$complete ? "line-through" : "none"요런식으로 써주시면 됩니다!)

[tkv00]

꿀팁 감사드립니다..ㅜㅜ