
React에서 Click 한 메뉴만 활성화하는 법 (한글 및 띄어쓰기 메뉴 해결 방법)
2022. 5. 3. 19:44
개발이야기/React.js
에러발생 & 해결방법 구현해야하는 기능은 메뉴를 눌렀을때, 하나의 메뉴텝만 클릭이 되어야하고, 알맞는 스타일 효과를 주는 기능을 만들어야했습니다. 기존에는 includes 메소드를 사용하여 배열에 특정 요소가 포함되어 있는지를 판별하였지만, 이 방식은 한글 메뉴나 띄어쓰기를 포함한 메뉴에서 활성화 효과가 제대로 적용되지 않는 문제가 있었습니다. 문제를 해결하기 위해, 상태 관리를 통해 현재 선택된 메뉴의 인덱스를 추적하는 방식으로 개선하였습니다. 리액트의 useState를 활용해 선택된 메뉴의 인덱스를 상태로 저장하고, 이 상태를 업데이트하는 함수를 onClick 이벤트 핸들러로 설정하였습니다. 사용자가 선택한 메뉴만 활성화 효과를 받도록 수정하였습니다. 기존의 코드 className={ currentP..