react 다이나믹하게 태그 속성, 어트리뷰트 추가하는 방법

react 앱에서 태그 엘리먼트에 속성과 속성의 값을 다이나믹하게 선언하는 방법에 대하여 알아봅니다. (여기서 다이나믹하게 변경한다는 뜻은 상태값에 따라 속성과 그 값이 즉시 추가, 변경되는 것을 의미합니다.)

! react 태그 요소에 속성 다이나믹하게 추가하기

예를들어 <fieldset> 태그가 존재합니다. 이 태그에 disabled 어트리뷰트를 상태값에 따라 다르게 추가 및 변경하려면 어떻게 하는지 알아보도록 하죠. 이 방법은 jsx를 사용하는 경우에 특히 유용합니다. 방법은 아래와 같으며 react 16 버전 이상에서 동작합니다.

위 코드를 보면 상태값 isDisabled에 따라 fieldset 태그 요소의 disabled 속성과 값 true가 동시에 추가됩니다. false인 경우라면? 당연히 disabled의 속성과 값 모두 사라지게 됩니다.


@ 왜 속성과 속성값을 동시에 바꾸어야 하는가?
disabled 등의 일부 속성값은 true / false와 상관없이 적용될 수 있습니다. 즉, 브라우저에 따라 다를 수 있지만 속성의 유무가 영향을 미치기 때문에 단순히 값을 변경하는 것 만으로는 의도한 결과를 얻지 못할 수 있기 때문입니다. 실제로 React 앱을 사용하여 disabled의 값만 true / false로 변경했을 때 정상 동작하지 않더군요.

! 마치면서

다시 말하지만 이 방법이 유용한 이유는 fieldset의 경우 값과 상관없이 disabled 태그가 사용되는 경우 하위 모든 엘리먼트에 영향을 미치며 의도하지 못한 결과가 나타날 수 있기 때문입니다. 이런 이유로 이와 같은 방법이 반드시 필요할 수 있습니다.