input type radio

오늘 구현하면서 input의 type을 radio로 하여서 무조건 하나의 값만 필수적으로 받게 하려고 했다.

그리고 테스트를 하면서 1단계를 클릭해보고 2단계를 클릭하려던 찰나에 다른 것들은 클릭도 안될 뿐더러 해제도 되지않는 것이다.

1단계만 클릭이 됐었는데 그 이유를 찾다보니 htmlFor의 속성과 아이디 값이 하나밖에 없었기 때문이였다.

우선 나는 해당하는 데이터에서

    data.map((value,idx) => (
        <>
          <input type="radio" id="options" key={idx}/>
             <label htmlFor="options"></label>
      </>
    ))

이런식으로 작성했었다. htmlFor의 속성과 id가 일치해야 그 값을 찾아 입력받을 수 있다고 생각했는데,
가만 생각해보면 map을 통해 반복을하는데 이러면 반복되는 id와 htmlFor 속성의 값이 다 같은거 아닌가? 라고 생각이 들었다.
실제로 이게 정답이였다.

고유하지않은 id와 htmlFor속성이 동일한 id를 참조하게 되면, 해제도 되지않고 사용자 입장에서는 어떤 버튼을 선택해야할지 모르게되는
상황이 발생하게 된다.
그렇기 때문에 새롭게 각각의 옵션들에 맞게 고유한 아이디를 주기 위해서 1-1/1-2/1-3과 같이 표현하도록 하였다.

    <input type="radio" id={`option-${v.id}-${options.id}`} />  // 각각의 id값에는 option-1-1 형태
    <label htmlFor={`option-${v.id}-${options.id}`}></label> // htmlFor 속성값도 위와 같음

위 처럼 템플릿 리터럴을 통해 각각의 고유 아이디값을 문자열로 옵션의 1-1, 그 다음 반복할 때에는 첫 번재 옵션의 두 번째이니 1-2 이런식으로 아이디값을 읽을 수 있게 해서 구현을 완료하였다!