[REACT] React에서 type="range"인 input의 요소가 드래그되지 않음

<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의 어트리뷰트가 달라서 작동하지 않던 것.

 

 

+)

 

..?

무슨 차이일까 싶어서 찾아봤더니

https://ko.reactjs.org/docs/dom-elements.html#value

영문은 Controlled Component와 Uncontrolled Component이다.

 

제어 컴포넌트의 경우(value attribute를 사용한 input) 컴포넌트가 마운트 된 후에도 value값을 변경할 수 있고(DOM의 값이 업데이트 가능함.)

 

비제어 컴포넌트의 경우(defaultValue attribute를 사용한 input) 컴포트가 마운트 된 후라면 value값을 변경할 수 없다.(DOM의 값이 업데이트 되지 않음.)