[React] DOM 요소에 사용자 정의 속성 사용하기

개발을 하다가 콘솔을 찍어보니 Warning이 뜨는 부분이 발견된 순간이 있었다.

코드는 위와 같았고, 'isActive'라는 사용자 정의 속성을 추가했다.

그 결과 'React doest not reconize the 'isActive' prop ona DOM element.'라는 Warning이 발생했다.

이를 해결하기 위해 style = {} 속성 안에 props name을 넣기도 했었지만, 스타일에 관련된 부분이 아니었기에 어떻게 해야 할지 고민이 됐었다.

해결책

그리고는 감사하게도 해결책을 찾게 되었다. (by GPT)

일반적으로 React는 DOM 요소에 사용자 정의 속성이 아닌 표준 HTML 속성만을 허용합니다.

그래서 어떤 식으로 해결을 했느냐 함은?

첫 번째, 위와 같은 식으로 'data-'라는 이름을 앞에 사용자 정의 속성 이름 앞에 붙여주는 식으로 속성을 사용한다.

두 번째, 위와 같은 식으로 props['data-사용자 정의 속성'] 으로 사용한다.

이렇게 하면 깔끔하게 해결할 수 있게 된다!

ㅋㅋㅋ 조금 번거로운 느낌이 들 수는 있지만, 표준 규칙을 따른 뒤에 Warning을 줄이는 것도 중요하기에 좋은 모습이라고 본다.