React 프로젝트 중 질문 있습니다

8 글 보임 - 1 에서 8 까지 (총 8 중에서)

글쓴이

글
2022년 3월 26일 12:29 #30418

DONE
참가자

React강의 두번 완강 후 혼자서 만들어 보고 있는데요

선생님

체크박스를 체크하면 사진 처럼 Text에 줄이 그어지는 Css를 만들어 놓고 붙였다 띄었다 하는 방식을 사용했습니다

문제는 가장 최근에 등록한 글만 함수가 적용이 됩니다

그리고 밑에 있는 글의 체크박스를 눌러도 최근 글이 효과가 적용이 됩니다

개별적으로 체크를 했어도 줄이 그어지게 할 수 있는 방법이 있을까요?

제가 예전에 JS경우 비슷한경우 this키워드로 해결을 했었던거 같은데 맞을까요?
React에서는 어떤 방법으로 풀어가야 하나요?

2022년 3월 26일 15:46 #30429

codingapple
키 마스터

querySelector()는 하나만 찾아줍니다 querySelectorAll 쓰거나 그러면 될듯요

체크할 때 마다 x번째를 체크했으면 x번째 글에 클래스명 추가하라고하면 되겠군요

2022년 3월 26일 17:52 #30434

DONE
참가자

이렇게 해봤습니다 작동 잘됩니다!
맞겠죠?

2022년 3월 26일 18:28 #30437

codingapple
키 마스터

네 아니면 글자에 if문써서 조건부로 class명을 주는 방법도 있습니다

2022년 3월 26일 23:38 #30459

DONE
참가자

선생님 약간 이런식 인가요?
비교가 잘못 된거 같기도 하고 잘 모르겠습니다ㅜ

2022년 3월 27일 10:34 #30471

codingapple
키 마스터

원하는 글자에 className={ 조건식 ? 'strikethrough' : '' } 이런 식입니다

2022년 3월 28일 10:35 #30533

DONE
참가자

선생님 여기까지 어떻게 구글링 해서 찾았습니다
코드도 작동 잘 되는데 문제가ㅠ 전에 i 피라미터로 해결 할 수 있었는데
className이 전체로 적용되는 문제가 발생합니다ㅠ

2022년 3월 28일 15:51 #30548

codingapple
키 마스터

각각 글마다 체크가 되었는지 안되었는지 기록할 곳이 필요합니다 지금은 1개밖에 없군요

그래서 state를 [false, false, false ... ] 글 갯수만큼 만들어놓으면 될듯요
글쓴이

글