7회차 과제 - 허기영

[hky035]

1. 내가 개발한 기능

const handleComplete = (id) => {
    console.log("clicked!")
    const todoItem = document.getElementById(id);
    todoItem.classList.add("completed")
  }

  return (
    <Box id={id}>
      <p>{body}</p>
      <div>
        <Button onClick={() => handleComplete(id)}>완료</Button>
        <Button onClick={() => handleDelete(id)}>삭제</Button>
      </div>
    </Box>
  )
}
 const Box = styled.div`
  ...
  &.completed{
    text-decoration: line-through;
    color : gray;
  }
`;

const Button = styled.button`
  background : none;
  border : none;
`;

삭제, 완료 버튼을 구성하는 컴포넌트 작성(styled-components 사용)
완료 버튼 클릭 시 실행되는 함수 handleComplete(id) 작성

완료 버튼 클릭 시 <Box> 컴포넌트에 completed 클래스를 추가해주어 취소선과 글자 색이 회색으로 바꾸도록 적용 : styled-componets의 &.completed{ ... } 사용

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

const handleComplete = (id) => {
    const todoItem = document.getElementById(id);
    todoItem.classList.add("completed")
  }

완료 버튼을 클릭하였을 시 실행되는 함수 handleComplete(id) 함수 개발 시 document.getElementById(id)를 사용하여 선택된 할 일 목록에 completed 클래스가 추가되도록 하였다.

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

styled-components를 사용하여 <button>이나 <div> 태그는 컴포넌트를 만들었지만 클래스 선택자를 사용하여 스타일을 적용시키는 방법에 의문이 들었다.

초기에는 TodoListItem.css 파일을 따로 작성하여 .complete 선택자에 대한 스타일을 따로 지정해주었지만 styled-components에서 &.클래스명{ ... }을 사용하면 컴포넌트에 해당하는 클래스가 있을 시 스타일 적용이 가능하였다.

클래스는 유사한 기능, 역할을 담당하고 ui가 비슷한 요소에 사용하여 동일한 스타일을 적용하기 위해 사용하고 리액트는 동일한 요소를 컴포넌트화 시켜 재사용하여 코드의 중복을 줄인다. styled-components를 사용한다면 이 두 가지를 잘 사용하는 것이라 생각한다.

이렇듯 다양한 노드 모듈(?)을 잘 활용하면 코드를 더욱 간편하고, 불필요한 파일 생성을 줄일 수 있을 것 같다.

[ches0703]

todo data에 isCompleted와 같은 속성을 추가했다면 좀 더 쉽게 하셨을 텐데 쉽지 않은 여정을 택하신 것 같네요... ^^
styled-components의 &를 사용해 SCSS와 비슷하게 작성할 수 있다는 점을 잘 활용하신 것 같습니다!(참고로 &를 사용해 가상요소 선택자자 가상 클래스 선택자를 사용할 수 있습니다)

[ches0703]

React에서 querySelector나 getElementById와 같이 DOM요소를 직접적으로 조작하는 것은 권장하지 않습니다. 만약 DOM 요소에 대한 조작이 필요한 경우 수업에서는 안 다루었지만 useRef와 같은 훅을 사용합니다.
useRef을 사용한 경우 다음과 같이 작성할 수 있습니다.

const TodoListItem = ({id, body, handleDelete}) => {

  const boxRef = useRef()

  const handleComplete = () => {
    boxRef.current.classList.toggle('completed')
  }

  return (
    <Box ref={boxRef}>
      <p>{body}</p>
      <div>
        <Button onClick={() => handleComplete()}>완료</Button>
        <Button onClick={() => handleDelete(id)}>삭제</Button>
      </div>
    </Box>
  )
}

useRef의 경우 DOM요소 조작 외에도 다른 용도로도 사용되는 경우도 있어 한번 찾아보시면 좋을 것 같네요

[hky035]

리액트에서 DOM요소 조작이 적합하지 않은 지는 처음 알았네요!
useRef 관련 사항 검색하며 찾아보고 모르는 게 생긴다면 여쭤보겠습니다!
감사합니다!

[hky035]

todo data에 isCompleted와 같은 속성을 추가했다면 좀 더 쉽게 하셨을 텐데 쉽지 않은 여정을 택하신 것 같네요... ^^ styled-components의 &를 사용해 SCSS와 비슷하게 작성할 수 있다는 점을 잘 활용하신 것 같습니다!(참고로 &를 사용해 가상요소 선택자자 가상 클래스 선택자를 사용할 수 있습니다)

완료 여부가 할 일 아이템에 들어가있는 게 맞겠네요. 제가 너무 글자 모양 등 css에만 신경쓰느라 단순하게만 생각한 것 같습니다! 관련 사항 반영 하겠습니다.
피드백 감사합니다!

[JO-MINSEO]

complete라는 속성을 추가해 styled-components에서 글자 색이나 줄 그어짐을 만드는 것도 방법인 것 같습니다..!

[hky035]

네, 은성님도 해당 방법을 이야기하셨어서 생각해보니 말씀하신 방법대로 구현하는 게 맞는 것 같습니다!
너무 CSS 관련 스타일 추가만 생각한 것 같습니다.
해당 부분 차후 수정해서 커밋하겠습니다!

[hky035]

해당 부분 수정 완료해서 커밋했습니다!

[JO-MINSEO]

handleComplete 함수는 App.js에서 정의하고 TodoListItem에서는 함수를 전달하는 식으로 만들면 코드가 더 간단해질 것 같습니다!

[hky035]

각 아이템마다 해당 함수가 동작하니 TodoListItem.js에 작성하였는데, 해당 방법도 고려해보겠습니다!