Button2 React(99) 버튼 클릭시 동적으로 테두리색 변경하기 작년인가 재작년에 임시저장만 해놓고 미루다 정리해놓은게 아까워서 올려본다. 아주 심 - 플하게 동작하는 버튼 선택 기능이다 :) 버튼 인덱스를 저장할 상태 변수를 만들자 const [selectedIndex, setSelectedIndex] = useState(0); 핵심은 클릭해서 저장된 selectedIndex 와 === 매핑된 index 가 같을 경우에만 active 클래스가 추가 된다는 점이다. {buttonItems.map((item, index) => ( setSelectedIndex(index)} > {item.title} ))} 2023. 9. 6. React(87) 여러 버튼 중 하나 클릭시 색상변경하기 여러 버튼이 있을 때, 하나만 클릭하면 색상이 변하게 만들어보자 워낙 비슷한 요구사항들이 많기 때문에 그동안 비슷한 포스팅도 여럿 올린 것 같다. 하지만 과신과 방심은 금물이다 예전포스팅보다 조금 더 리팩토링된 코드로 다시한번 복습해보자 :) React(87) 여러 버튼 중 하나 클릭시 색상변경하기 새발컴퍼니 회원모집 모달창이 있다. 세가지 회원 타입이 있는데 하나를 선택해서 클릭하면 색상이 변경된다고 해보자 과거의 새발자가 작성했던 방식은 타입과 타이틀이 분리되어 HTML 태그에서 합쳐서 보여주는 방식이였다. 지금의 새발자는 객체형식으로 따로 노는 { 타입과 타이틀 } 을 묶어보았다. const items = [ { type: 'general', title: '일반 회원 가입하기', }, { type:.. 2022. 11. 7. 이전 1 다음 반응형
