Input range slider의 값을 state에 저장하고 싶을 때

문제 상황

(...)
<input
	type="range"
    ref={inputRef}
    onChange={() => setValue(inputRef.current.value)}
/>

input[type="range"]로 slider를 구현할 때 해당 input의 current value를 state에 저장하고 싶어서 onChange에 setState 함수를 넣자 드래그가 안 되는 문제가 발생했다.

해결

setState를 하게 되면 component가 re-rendering되게 되어 slider에서 focus가 풀리기 때문에 드래그가 안 되는 것이다.
따라서 드래그가 끝나는 시점에서 이벤트가 발생하도록 onChange 대신 onMouseUp(pc용), onTouchEnd(모바일 용) 함수를 사용하여 해결했다.

(...)
<input
	type="range"
    ref={inputRef}
    onMouseUp={()=>setValue(inputRef.current.value)}
    onTouchEnd={()=>setValue(inputRef.current.value)}
/>

(...)
<input
	type="range"
    onMouseUp={e=>setValue(e.target.value)}
    onTouchEnd={e=>setValue(e.target.value)}
/>

앞으로 주의할 점

setState가 실행되면 해당 컴포넌트가 리렌더링된다는 점을 잊지 말고 코드를 짜도록 하자.