리액트 - 범위 슬라이더

현재 진행하고 있는 프로젝트는 리액트 + 스프링 부트로 이루어져있다.

일단 리액트를 사용할 줄 아는 선임이 없어 독학하면서 프로젝트 진행 중인 상태이다.

 

내가 원하는 슬라이더는 배너나 이미지 슬라이더가 아닌 범위 슬라이더이다.

흔히 쇼핑몰에서 검색 필터에 나오는 가격 슬라이더 같은 느낌의 ?..

 

구글링을 해보니 리액트에서 많이 사용하는 무한 스크롤이 제일 많이 검색되었고, 그 다음은 라이브러리 위주만 나와서 내가 원하던 정보가 없던 중

input type 요소 중 range 라는 것을 발견

사용 해보니 내가 원하던 슬라이더 바가 나왔다.

이 value 값을 컨트롤 하기 위해 

const handleChange = e => {
    let slider = document.getElementById('myRange');
    let output = document.getElementById('value');
    output.innerHTML = slider.value;

    slider.oninput = function () {
      output.innerHTML = this.value;
    };
  };
...
            <input
              type="range"
              id="myRange"
              className="js-range-slider"
              min="1"
              max="100"
              value="50"
              onChange={handleChange}
            />
            <p>
              Value: <span id="value"></span>
            </p>

다음과 같이 했는데,  p태그에 있는 value는 화면에 재할당이 되는데 실제 input 안에 들어가는 value는 재랜더링?.. 재할당?..이 안됨 ( value는 바뀌지만 스크롤이 안먹힌다 ).

 

일단 내가 리액트에 기초지식이 없는 상태로 뛰어든 것도 있고, useState나 각각 훅 들을 왜 쓰는지 정확히 파악하지 못하지만 useState를 사용해서 다시 set을 해야한다는 것은 눈치챔..

 

const [value, setValue] = useState(50);

const handleChange = e => {
    setValue(e.target.value);
  };
  
  ...
            <>
              <input
                type="range"
                id="myRange"
                className="js-range-slider"
                min="1"
                max="100"
                value={value}
                onChange={handleChange}
              ></input>
              <p>
                Value: <span>{value}</span>
              </p>
            </>

 

다음과 같이  useState로 초기값을 init 해두고, 각 Value 들이 전달되게끔 바꿈..

그냥 또 어디선가 쓰겠지 하고 기록