TIL_221210_ ✅🚩❓❗ React 입문 과제 다시 한 것 수정

내일배움캠프 4기 스파르타코딩 React B반

---

📒 오늘의 공부

1. React 입문 과제 다시 한 것 더 수정

• ✅ CustomButton 분리

• 중복 코드 정리(ToDoBox)

• 내일 스터디를 위해 CSS 좀 더 수정했다.

  • input의 focus-visible을 outline: none으로 했더니 검은색 테두리가 더 이상 안 보인다!
  • elements의 style을 잘 살펴보자! 해답이 있다!

• CustomButton 분리

  • 강의 자료를 복습하며 어떻게 분리할지 구상
  • 버튼은 총 3개 - 추가, 삭제, 완료(취소)

❓

1. 버튼의 공통 style을 변수로 정하고 각 버튼마다 style 몇 개만 다르게 하고 싶은데 적용이 잘 안 됨!

2. hover 효과는 jsx문법으로 잘 적용이 안 돼서 검색!

   • hover 효과도 변수, useState를 활용해서 쓰는데 더 공부하고 적용해보기

3. 추가, 삭제는 btnName을 props로 넘겨서 쉽게 했는데
   완료, 취소도 case를 나눠서 색을 다르게 주고 싶다.

   • 현재 완료, 취소 버튼은 toDo.isDone에 따라 취소, 완료로 보이는데 children으로 안 받고 customButton에 옮겼다가 에러..

4. 삭제, 완료 버튼은 button을 customButton으로 바꿔도 CSS파일의 hover가 잘 적용되는데 추가하기 버튼은 삭제,완료처럼 div로 묶어서 상위 클래스의 button에 hover를 줘도 CSS의 hover가 적용 안 됨

   • 삭제, 완료 버튼 CSS파일에서 hover시 색을 변경했는데 그것도 적용이 안 됨!!

❗

4. customButton에서 버튼에 color가 들어가 있어서 안 됐던 것
   • hover를 하면 바꿔줘야 하는데 customButton에서 설정한 style이 우선이라서 그런지 바뀌질 않았고 customButton에서 정하지 않은 스타일은 CSS파일대로 적용이이 됐다.

---

🚩

• 오늘은 늦게 공부 시작!
  • 간만에 늦잠 자고 저녁까지 이것 저것 하면서 시간 보내다 저녁에 공부 시작했다.
  • 주말 중 하루는 이렇게 늦게까지 뒹굴거리기도 하고 공부 외의 것들을 하면서 보내니까 너무 좋다.