React state 사용 방법

#1. 숫자 1씩 증가시키기

function App() {
  const [counter, setCounter] = React.useState(0);
  const onClick = () => {
    //setCounter(count + 1);
    //현재 state 값으로 다음 state 값을 계산하고 싶다면 아래가 더 안전하다.
    setCounter((current) => current + 1);
  };
  return (
  <div>
    <h3>Total clicks: {counter}</h3>
    <button onClick={onClick}>Click</button>
  </div>
  );
}

React.render(<App />, 넣을 곳);

- setCounter은 counter += 1, React.render(<App />, 넣을 곳) 역할을 동시에 해줍니다.

 

#2. 분을 시간으로 바꾸기

function App() {
  let [minutes, setMinutes] = React.useState();
  let [flipped, setflipped] = React.useState(false);
  const onChange = (event) => {
    setMinutes(event.target.value);
  };
  const reset = () => {
    setMinutes(0);
  };
  const onFlip = () => {
    reset();
    setflipped((current) => !current);
  }
  return (
  <div>
    <h1>Super Converter</h1>
    <label htmlFor='minutes'>Minutes</label>
    <input id='minutes' placeholder='Minutes' type='number'
      value={flipped ? amount * 60 : amount} onChange={onChange} />
    <h4>Minutes : {minutes}</h4>
    <label htmlFor='hours'>Hours</label>
    <input value={flipped ? amount : Math.round(amount / 60)} id='hours' placeholder='Hours' type='number' onChange={onChange} />
    <button onClick={reset}>reset</button>
    <button onClick={onFlip}>Flip</button>
  </div>
  );
}
const root = document.getElementById('root');
ReactDOM.render(<App />, root);

- React JS에서 label에 htmlFor 속성을 사용해야하고, 클래스 이름은 className 속성을 사용합니다.

- for과 class는 자바스크립트에서 사용하는 속성이기 때문입니다.

- input은 React에서 사용자가 직접 value를 통제할 수 없으므로 useState()를 사용합니다.

 

 

#3. 단위 변환기 만들기