WEB/React
[REACT] React에서 type="range"인 input의 요소가 드래그되지 않음
ImFe
2022. 10. 20. 19:37
<div class='range-slider'>
<span class="rangeValues"></span>
<input Value="5" min="0" max="50" step="5" type="range" />
<input Value="45" min="0" max="50" step="5" type="range" />
</div>
리액트에서 위 JSX가 동작하지 않는다. (움직여야 할 불릿이 드래그되지 않음) value값이 맞게 인식되어도 드래그는 되지 않는다.
해결)
<div class='range-slider'>
<span class="rangeValues"></span>
<input defaultValue="5" min="0" max="50" step="5" type="range" />
<input defaultValue="45" min="0" max="50" step="5" type="range" />
</div>
JSX와 html의 어트리뷰트가 달라서 작동하지 않던 것.
+)
무슨 차이일까 싶어서 찾아봤더니
영문은 Controlled Component와 Uncontrolled Component이다.
제어 컴포넌트의 경우(value attribute를 사용한 input) 컴포넌트가 마운트 된 후에도 value값을 변경할 수 있고(DOM의 값이 업데이트 가능함.)
비제어 컴포넌트의 경우(defaultValue attribute를 사용한 input) 컴포트가 마운트 된 후라면 value값을 변경할 수 없다.(DOM의 값이 업데이트 되지 않음.)