개인페이지 뜯어 고치기
시행한 부분 – 네이게이션 바(CSS 적용은 뒤에)
손보고 있는 부분 – 아이템 체크 부분
클릭했을 때 하단 상세 부분 : display:none 부분을 display:block으로 바꿔줌 – usestate로 조절가능
똑같은 것을 다시 클릭하면 display:none 으로 다시 전환(토글기능) – 이 부분에서 문제가 생김
이유 : 똑같은 것을 2번 눌려야 전환이 되야 한다. 즉, 계속해서 다른걸 누르면 display가 none이 되어서는 안된다
생각하고 있는 경우들
- 라디오버튼 : 하나씩 눌려지지만 문제는 해제가 안된다
- usestate로 카운트를 만들어서 하는 방법 : 카운트가 내려갈 때 없애는 방법을 생각해봤지만 조건을 못맞춘다
거기에 추가로 되야 하는 부분 : 클릭하는 것에 따른 출력내용도 달라저야함
정리하면
- 단일클릭-display:block이 되야 하고 내용이 따로 올라와야함
다른 것을 클릭하면 display 값을 그대로여야 하고 내용은 달라져야함 - 두번 연속 클릭 시-display:none이 되야 한다(내용이 있어도 display:none이기 때문에 안보임)
동작에 대해서 확인해보니 css가 아닌 태그 내의 style로 조절하는듯 하다.
생각해본 다른 경우
- usestate로 모든 값을 일단 false로 둔다
- 조건문을 써서 하나가 ture이면 다른 값들을 모두 false로 만든다-이 부분이 중요부분
하나라도 true이면 화면에 표시되어야 하는게 정상이다. 그 다음 내용을 어떻게 바꿀지는 생각해봐야함 - 한번 더 누를 시에는 토글로 만들어 모두 false로 만든다 – 토글로 만든다
좀 복잡하지만 만들어 놓음
해결할 부분 : 내용물을 따로 출력 – 해결
조금 더 수정해서 참고사이트와 비슷하게 설정이 될 것 같음