React(87) 여러 버튼 중 하나 클릭시 색상변경하기

---

 

 

여러 버튼이 있을 때, 하나만 클릭하면 색상이 변하게 만들어보자

워낙 비슷한 요구사항들이 많기 때문에 그동안 비슷한 포스팅도 여럿 올린 것 같다.

하지만 과신과 방심은 금물이다 예전포스팅보다 조금 더 리팩토링된 코드로 다시한번 복습해보자 :)

 

 

---

React(87) 여러 버튼 중 하나 클릭시 색상변경하기

새발컴퍼니 회원모집 모달창이 있다.

세가지 회원 타입이 있는데 하나를 선택해서 클릭하면 색상이 변경된다고 해보자

 

 

 

 

 

과거의 새발자가 작성했던 방식은 타입과 타이틀이 분리되어 HTML 태그에서 합쳐서 보여주는 방식이였다.

지금의 새발자는 객체형식으로 따로 노는 { 타입과 타이틀 } 을 묶어보았다.

  const items = [
    {
      type: 'general',
      title: '일반 회원 가입하기',
    },
    {
      type: 'special',
      title: '특별 회원 가입하기',
    },
    {
      type: 'admin',
      title: '관리자 가입하기',
    },
  ];


const [select, setSelect] = useState<string>('');

const handleClick = (type: string) => {
    setSelect(type);
    // 가입 로직 실행
};

 

 

맵 함수를 돌려 select 와 === item.type 의 값을 비교한 후 값이 같으면 css 의 class 를 동적으로 만들어 준다.

 
 return(
   {items.map((item, index) => (
      <div
        key={index}
        onClick={() => handleClick(item.type)} 		      // type 받아 set함수에 넣어준다
        className={`${select === item.type ? 'select' : ''}`} // 클릭하면 select클래스가 추가
      > 
        {item.title}
      </div>
   ))}
);

 

 

클릭하면 추가되는 select 클래스에서 버튼 스타일을 변경해주자

.select {
  border: 1px soild green;
  background: light-green;
}