TIL) 스파르타 개발일지 23-02-15

input(Range)에서 지정된 값을 상태관리하는 법.

import React, { useState } from 'react';

function App() {
  const [value, setValue] = useState(0);
  
  const handleChange = (event) => {
    const newValue = parseInt(event.target.value, 10);
    setValue(newValue);
    console.log([0, 6, 12, 24, 36][newValue]);
  };
  
  return (
    <div>
      <input type="range" min="0" max="4" value={value} onChange={handleChange} />
    </div>
  );
}

1. useState Hook을 사용하여 상태값을 초기화하고, input range 요소를 렌더링합니다.
2. input range 요소는 min, max 및 value props를 사용하여 범위를 지정하고 현재 선택된 값을 나타냅니다.
3. onChange 핸들러는 이벤트 객체를 인수로 받아 새 값을 계산하고 setValue 함수를 호출하여 새 값을 상태에 저장합니다.
4. console.log를 이용하여 선택한 값을 콘솔에 출력합니다.
5. 이 코드에서는 value 값이 배열의 인덱스와 일치하므로 선택된 값을 쉽게 가져올 수 있습니다.
6. 선택한 값을 출력하기 위해 console.log() 메서드를 사용하고, 이 메서드는 선택한 값을 브라우저 콘솔에 출력합니다.