React div, svg 값(value) 얻기

React에서 div, svg 값 가져오기

리액트는 input이나 textarea, select같은 태그 요소에서 target이라는 속성(attribute)을 지원해준다.
이를 이용해 target.value을 사용하면 원하는 값을 얻을 수 있다.
제어 컴포넌트를 만들기 위해 사용하는 태그들에게 지원해주는 기능인 것이다.

그러나 div와 같은 다른 요소에서는 value를 지원하지 않는다.
div같은 것은 일명 '비제어 컴포넌트'를 만드는 것이기 때문이다.
때문에 이런 태그들은 defaultValue로 접근할 수 있다.

그렇지만 value/defaultValue가 아닌 다른 이름으로 가져오는 방법도 알아보고 싶었다.

div에서 값 가져오기

결론적으로 말하면 div에 아래 리엑트가 지원하는 속성을 적용해 원하는 값을 지정하고, 이벤트 발생 시 getAttribute()메소드로 아래 리엑트가 지원하는 속성을 가져오면 된다.

//jsx
const navHandler = (event) => {
  const value = event.currentTarget.getAttribute('name') // => onClick시 name값 '검색' 가져오기
}

//... html 폼
<div name="검색" onClick={navHandler}>검색</div>

그렇다면 svg 형식에서 특정 값을 가져오려면 어떻게 해야 할까?
HTML에서 svg와 다른 일반 DOM 태그들은 다른 유형으로 인식하는 것 같았다.
때문에 리액트에서 제공하는 HTML속성(attribute)도 방법이 달랐다.

SVG에서 값 가져오기

SVG에서도 비슷한 방식을 사용하면 된다.
다만 위 예시처럼 div, p와 같은 일반 DOM요소는 name을 사용해서 가져왔지만, SVG에서는 그 이름이 조금 다르다.
SVG의 경우 name이 아닌, 조금 비슷한 이름의 attributeName를 사용해야 한다.
즉, 일반DOM요소들의 속성(attribute)과 SVG의 속성(attribute)의 이름이 다르다 는 것을 알아야 한다.

//jsx
const navHandler = (event) => {
  const value = event.currentTarget.getAttribute('attributeName') // => onClick시 attributeName값 '검색' 가져오기
}

//... html 폼
<SvgIcon attributeName="검색" onClick={navHandler}>검색</SvgIcon>

결론 : 반드시 SVG를 따로 제어하는 경우가 아니라면 div같은 요소로 묶고, div에 이벤트와 속성값을 넣고 사용하는 것이 속편하다

React가 지원하는 DOM 속성(attribute)

accept acceptCharset accessKey action allowFullScreen alt async autoComplete
autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked
cite classID className colSpan cols content contentEditable contextMenu controls
controlsList coords crossOrigin data dateTime default defer dir disabled
download draggable encType form formAction formEncType formMethod formNoValidate
formTarget frameBorder headers height hidden high href hrefLang htmlFor
httpEquiv icon id inputMode integrity is keyParams keyType kind label lang list
loop low manifest marginHeight marginWidth max maxLength media mediaGroup method
min minLength multiple muted name noValidate nonce open optimum pattern
placeholder poster preload profile radioGroup readOnly rel required reversed
role rowSpan rows sandbox scope scoped scrolling seamless selected shape size
sizes span spellCheck src srcDoc srcLang srcSet start step style summary
tabIndex target title type useMap value width wmode wrap

React가 지원하는 SVG 속성(attribute)

accentHeight accumulate additive alignmentBaseline allowReorder alphabetic
amplitude arabicForm ascent attributeName attributeType autoReverse azimuth
baseFrequency baseProfile baselineShift bbox begin bias by calcMode capHeight
clip clipPath clipPathUnits clipRule colorInterpolation
colorInterpolationFilters colorProfile colorRendering contentScriptType
contentStyleType cursor cx cy d decelerate descent diffuseConstant direction
display divisor dominantBaseline dur dx dy edgeMode elevation enableBackground
end exponent externalResourcesRequired fill fillOpacity fillRule filter
filterRes filterUnits floodColor floodOpacity focusable fontFamily fontSize
fontSizeAdjust fontStretch fontStyle fontVariant fontWeight format from fx fy
g1 g2 glyphName glyphOrientationHorizontal glyphOrientationVertical glyphRef
gradientTransform gradientUnits hanging horizAdvX horizOriginX ideographic
imageRendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength
kerning keyPoints keySplines keyTimes lengthAdjust letterSpacing lightingColor
limitingConeAngle local markerEnd markerHeight markerMid markerStart
markerUnits markerWidth mask maskContentUnits maskUnits mathematical mode
numOctaves offset opacity operator order orient orientation origin overflow
overlinePosition overlineThickness paintOrder panose1 pathLength
patternContentUnits patternTransform patternUnits pointerEvents points
pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits
r radius refX refY renderingIntent repeatCount repeatDur requiredExtensions
requiredFeatures restart result rotate rx ry scale seed shapeRendering slope
spacing specularConstant specularExponent speed spreadMethod startOffset
stdDeviation stemh stemv stitchTiles stopColor stopOpacity
strikethroughPosition strikethroughThickness string stroke strokeDasharray
strokeDashoffset strokeLinecap strokeLinejoin strokeMiterlimit strokeOpacity
strokeWidth surfaceScale systemLanguage tableValues targetX targetY textAnchor
textDecoration textLength textRendering to transform u1 u2 underlinePosition
underlineThickness unicode unicodeBidi unicodeRange unitsPerEm vAlphabetic
vHanging vIdeographic vMathematical values vectorEffect version vertAdvY
vertOriginX vertOriginY viewBox viewTarget visibility widths wordSpacing
writingMode x x1 x2 xChannelSelector xHeight xlinkActuate xlinkArcrole
xlinkHref xlinkRole xlinkShow xlinkTitle xlinkType xmlns xmlnsXlink xmlBase
xmlLang xmlSpace y y1 y2 yChannelSelector z zoomAndPan

• 참고

리액트 DOM요소 접근하기