TIL001 선택된 배열 버튼 볼드 처리하기

React + TS + Supabase (2025-04-15)

목표

• 1부터 12까지의 숫자 버튼을 만들기
• 버튼을 클릭하면 볼드체로 보이게 하기

---

1. 배열로 버튼 만들기

Array.from()을 사용해서 1부터 12까지 숫자를 만들어 버튼을 만든다

{Array.from({ length: 12 }, (_, i) => (
  <button key={i}>{i + 1}</button>
))}

• Array.from({ length: 12 }): 길이 12인 배열 생성
• (_, i) => i + 1: 인덱스를 이용해서 1~12 숫자를 반환

---

2. 상태 만들기 (useState 사용)

선택된 버튼을 useState로 저장한다

const [localSelectedMonth, setLocalSelectedMonth] = useState<number | null>(null);

• localSelectedMonth: 현재 선택된 숫자
• setLocalSelectedMonth: 숫자를 변경하는 함수

---

3. 클릭 이벤트로 상태 변경

버튼에 클릭 이벤트를 연결해서, 누르면 해당 숫자가 상태로 저장되도록 함

onClick={() => setLocalSelectedMonth(month)}

---

4. 조건부 클래스 적용

className={localSelectedMonth === month ? 'font-bold' : ''}

1. localSelectedMonth === month:

현재 이 버튼의 숫자(month)가 선택된 숫자(localSelectedMonth)와 같은지를 비교
같으면 true, 다르면 false

2. 삼항 연산자 (? :) 사용:

조건 ? 참일 때 값 : 거짓일 때 값

여기서는 조건이 참(true)이면 'font-bold'를 반환하고,
조건이 거짓(false)이면 '' 을 반환

3. 최종적으로 className에는 하나만 들어감

• 'font-bold': 선택된 버튼이면 굵게 표시
• '': 선택되지 않은 버튼이면 기본 스타일 유지

---

최종 코드

import React, { useState } from 'react';

const MonthNavigation: React.FC = () => {
  const [localSelectedMonth, setLocalSelectedMonth] = useState<number | null>(null);

  return (
    <div className="flex flex-wrap justify-start gap-4 p-2">
      <p>Month</p>
      {Array.from({ length: 12 }, (_, i) => {
        const month = i + 1;
        return (
          <button
            key={i}
            onClick={() => setLocalSelectedMonth(month)}
            className={localSelectedMonth === month ? 'font-bold' : ''}
          >
            {month}
          </button>
        );
      })}
    </div>
  );
};

export default MonthNavigation;

---

마무리

• 배열을 사용하면 반복되는 버튼을 쉽게 만들 수 있다
• useState를 통해 클릭된 값을 저장하고 관리할 수 있다
• 조건부로 스타일을 적용하면 특정 요소에만 원하는 스타일을 줄 수 있다