id 선택자를 조심하자

분명히 데이터를 map함수로 잘 쪼갰고, key 값도 잘 부여했으며, 자식 요소에서도 값을 잘 받아왔음에도 불구하고, 체크박스를 클릭해도 값이 변하지 않았다.

 

 

 

 

정확히는 두 번째 요소, 세 번째 요소를 클릭해도 오직 첫 번째 요소에만 적용이 됐다.

 

 

 

 

원인을 알기 위해 이것저것 뜯어보다가 내가 label태그를 사용하기 위해 input태그에 className이 아닌, id 선택자를 사용했다는 것을 깨달았다.

 

map함수를 통해서 제공해 주는 id 요소는 변해도, input 태그의 id 선택자는 고유하기에 첫 번째 컴포넌트의 경우 정상적으로 작동하지만, 두 번째 컴포넌트 이후부터는 id 중복으로 인한 문제가 발생하는 것이다 

 

 

 

 

input의 id속성과 label의 htmlFor 속성에 각 컴포넌트 해당하는 id를 적용시켜 줬더니

두 번째 요소를 눌렀을 때, 두 번째 요소가 잘 바뀌는 것을 확인할 수 있었다.

 

 

 

 

늘 id, class선택자를 생각 없이 사용했었는데, 이번 경험을 통해서 주의해서 사용해야 하는 이유를 깨달았다.