유저 프로필 페이지에서, 타 유저를 신고하는 버튼이 존재한다.
버튼을 클릭하면 신고를 할 수 있는 modal이 나오며, 신고 사유는 checkbox로 중복 선택할 수 있다. 이때, ‘기타’를 선택할 경우 상세 신고 사유를 작성할 수 있는 박스가 생기는 기능이 필요했다.
‘기타’ checkbox를 클릭하면 상세 사유 작성란이 나타나고, 다시 checkbox를 해제하면 박스가 사라지도록 만드는 기능을 구현했다.
기타 박스 상태 관리
useState로 ‘기타’(앞으로 etc라고 작성하겠다.) 박스의 열고 닫힌 상태를 관리했다. 기본값은 false로 하여 닫혀있는 상태이다.
-
set(!etc)checkbox(input)를 클릭(onClick)하면 setEtc를 통해 상태가 변경된다.
만약, etc의 값이 false(닫힌 상태)였다면 클릭을 통해 true(!etc/ 열린 상태)로 변경되고 값이 true였다면 false로 상태가 변화된다. -
etc && (<textarea>...)또한, etc의 값이 true라면
<textarea>가 보이게 되며, false라면textarea는 보이지 않게 된다.
구현 결과
위의 이미지와 같이 열고 숨기는 기능이 잘 구현된 것을 확인 할 수 있다.
마무리
이 간단한 기능조차 서칭을 통해 다른 분의 코드를 참고하고 작성하게 되었다. 일단 누군가의 코드를 참고해서 구현을 해낼 수 있다는 점에서 많이 성장했지만, 내가 생각하기에는 바닐라 js로 실제 개발한 경험이 매우 적다(거의 없다 싶이..)보니 스스로 떠올리는 것에 어려움이 존재한다는 것을 깨달았다.
일단은 다른 분의 코드를 참고함으로 어떻게 구현할 수 있을지 이번처럼 학습을 하여 나의 코드로 만들어 나가야 겠다.
Comments