7회차 과제 - 조민서

[JO-MINSEO]

1. 내가 개발한 기능

    const appendTodo = (event) => {
    event.preventDefault()
    const new_Todo = [...todoList, {id: Date.now(), body: inputString, completed: false}];
    setTodoList(new_Todo);
    setInputString('')
  }

completed 속성을 추가해 초기 값을 false로 설정

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

handleComplete 함수를 만들어 completed 속성을 true면 false로, false면 true로 반환

   return (
    <Box>
      <Text complete={completed}>{body}</Text>
      <Button>
        <button onClick={() => {handleComplete(id)}}>완료</button>
        <button onClick={() => {handleDelete(id)}}>삭제</button>
      </Button>
    </Box>
  )

완료 버튼에 onClick속성을 이용하여 handleComplete(id)를 전달하도록 함

 const Text = styled.p`
  text-decoration: ${props => props.complete ? "line-through" : "none"};
  color:${props=>props.complete? "gray":"black"};

p태그 내에 complete라는 속성이 true이면 줄이 그어지고, gray 색으로 변하도록 함

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

  return (
    <Box>
      <Text complete={completed}>{body}</Text>
      <Button>
        <button onClick={() => {handleComplete(id)}}>완료</button>
        <button onClick={() => {handleDelete(id)}}>삭제</button>
      </Button>
    </Box>
  )
}

const Text = styled.p`
  text-decoration: ${props => props.complete ? "line-through" : "none"};
  color:${props=>props.complete? "gray":"black"};
`

p 태그 내에 complete 속성을 이용하여 styled-components에서 줄이 그어지고, 색이 변할 수 있도록 함

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

완료 버튼을 누르기 전에 렌더링되는 것과 완료 버튼을 누른 후 렌더링되는 것을 따로 구현하는 것도 하나의 방법일 것이라 생각했음. 이를 구현해서 위 방법과 비교해서 어떤 방법이 더 나은지 비교해봐야 할 것 같음.

[hky035]

강의에서 배운 구조분해를 잘 사용한 것 같습니다!
추가로 completed 여부 설정도 포함시키는 것이 굉장히 좋은 것 같습니다.

[JO-MINSEO]

감사합니다!

[hky035]

코드를 굉장히 간결하게 잘 짠 것 같습니다. 삼항 연산자를 쓰면 코드를 더 줄여볼 수도 있을 것 같습니다!

[JO-MINSEO]

네! 피드백 감사합니다. 삼항 연산자를 쓰면 코드를 더 간결하게 줄일 수 있을 것 같네요!