React | nomadcoders 1/n

파과·2022년 7월 11일
0

React :: nomadcoders

목록 보기
1/6
post-thumbnail

(강의내용을 create-react-app으로 실행함 - ❌강의 코드 아님❌)


#3.4 State Functions

function Container() {
  let [counter, setCounter] = useState(0);
  
  return(
    <>
      <h3>Total clicks: {counter}</h3> 
      <button onClick={()=>{
        //setCounter(counter + 1);
        //이전 값을 바탕으로 현재 값을 업데이트할 때, 위 방법보다는 아래처럼 함수를 만드는 게 좋다. current가 현재 값이라는 것을 확실하게 보장해주기 때문. 혹시 모를 오류를 방지할 수 있음.
        setCounter((current)=> current + 1);
      }}>Click me</button>
    </>
  )
  
}

function App() {
  return (
    <>
     <Container ></Container> 
    </>
  );
}

#3.6 State Practice part One

분 ↔ 시 단위환산 프로그램 만들기

  • input의 value를 사용자가 수정할 때마다 값을 바꿔 표시하기
function App() {
  const [minutes, setMinutes] = useState(0);
  const onChange = (event) => {
    //console.log(event.target.value);
    setMinutes(event.target.value);
  }
  return (
    <>
      <h1>Super Converter</h1>
      {/* for은 자바스크립트 예약어기 때문에 react에서는 htmlFor를 사용해야 한다. */}
      <label htmlFor="minutes">Minutes</label>
      <input 
        value={minutes} 
        id="minutes" 
        type="number" 
        placeholder="Minutes"
        // onChange로 사용자가 input의 value를 수정할 때마다 listen
        onChange={onChange}
      />
      <h4>You want to convert {minutes}</h4> 
      <label htmlFor="hours">Hours</label>
      <input 
        id="hours" type="number" 
        placeholder="Hours" />
    </>
  );
}
  • 아래 코드까지 작성했을 때 Hours input은 수정이 불가능함.
return (
    <>
      <h1>Super Converter</h1>
      {/* for은 자바스크립트 예약어기 때문에 react에서는 htmlFor를 사용해야 한다. */}
      <>
        <label htmlFor="minutes">Minutes</label>
        <input 
          value={minutes} 
          id="minutes" 
          type="number" 
          placeholder="Minutes"
          // onChange로 사용자가 input의 value를 수정할 때마다 listen
          onChange={onChange}
        />
      </>
      <>
        <label htmlFor="hours">Hours</label>
        <input 
          value={minutes}
          id="hours" type="number" 
          placeholder="Hours" />
      </>
      
    </>
  );

아래와 같은 Warning 뜸.

Warning: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.

  • 양쪽을 다 수정하기 위해서는 어떻게? - 다음 강의에서...

#3.7 State Practice part Two

단위 변환을 뒤집는 flip function을 만들어보자.

function App() {
  const [amount, setAmount] = useState(0);
  const [inverted, setInverted] = useState(false);
  const onChange = (event) => {
    //console.log(event.target.value);
    setAmount(event.target.value);
  }
  const reset = () => setAmount(0);
  const onInvert = () => {
    reset();
    setInverted((current)=> !current);
  }
  return (
    <>
      <h1>Super Converter</h1>
      {/* for은 자바스크립트 예약어기 때문에 react에서는 htmlFor를 사용해야 한다. */}
      <>
        <label htmlFor="minutes">Minutes</label>
        <input 
          value={inverted ? amount*60 : amount} 
          id="minutes" 
          type="number" 
          placeholder="Minutes"
          // onChange로 사용자가 input의 value를 수정할 때마다 listen
          onChange={onChange}
          disabled={inverted}
        />
      </>
      <>
        <label htmlFor="hours">Hours</label>
        <input 
          //inverted상태에서는 사용자가 입력한 값, inverted되지 않은 상태에서는 분을 환산한 값
          value={inverted ? amount : amount/60}
          id="hours" type="number" 
          placeholder="Hours"
          onChange={onChange}
          disabled={!inverted}
          />
      </>
      <button onClick={reset}>Reset</button>
      <button onClick={onInvert}>{inverted ? "Turn back" : "Invert"}</button>
      
    </>
  );
}

#3.9 전체 코드 (KmToMiles포함)

import './App.css';
import { useState } from 'react';

function MinutesToHours() {
  const [amount, setAmount] = useState(0);
  const [inverted, setInverted] = useState(false);
  const onChange = (event) => {
    //console.log(event.target.value);
    setAmount(event.target.value);
  }
  const reset = () => setAmount(0);
  const onInvert = () => {
    reset();
    setInverted((current)=> !current);
  }

  return (
    <>
      <>
        {/* for은 자바스크립트 예약어기 때문에 react에서는 htmlFor를 사용해야 한다. */}
        <label htmlFor="minutes">Minutes</label>
        <input 
          value={inverted ? amount*60 : amount} 
          id="minutes" 
          type="number" 
          placeholder="Minutes"
          // onChange로 사용자가 input의 value를 수정할 때마다 listen
          onChange={onChange}
          disabled={inverted}
        />
      </>
      <>
        <label htmlFor="hours">Hours</label>
        <input 
          //inverted상태에서는 사용자가 입력한 값, inverted되지 않은 상태에서는 분을 환산한 값
          value={inverted ? amount : amount/60}
          id="hours" type="number" 
          placeholder="Hours"
          onChange={onChange}
          disabled={!inverted}
          />
      </>
      <button onClick={reset}>Reset</button>
      <button onClick={onInvert}>{inverted ? "Turn back" : "Invert"}</button>
      
    </>
  );
}
function KmToMiles() {
  const [amount, setAmount] = useState(0);
  const [inverted, setInverted] = useState(false);
  const onChange = (event) => {
    //console.log(event.target.value);
    setAmount(event.target.value);
  }
  const reset = () => setAmount(0);
  const onInvert = () => {
    reset();
    setInverted((current)=> !current);
  }

  return (
    <>
      <>
        {/* for은 자바스크립트 예약어기 때문에 react에서는 htmlFor를 사용해야 한다. */}
        <label htmlFor="km">Km</label>
        <input 
          value={inverted ? amount*1.60934 : amount} 
          id="km" 
          type="number" 
          placeholder="Km"
          // onChange로 사용자가 input의 value를 수정할 때마다 listen
          onChange={onChange}
          disabled={inverted}
        />
      </>
      <>
        <label htmlFor="miles">miles</label>
        <input 
          //inverted상태에서는 사용자가 입력한 값, inverted되지 않은 상태에서는 분을 환산한 값
          value={inverted ? amount : amount/1.60934}
          id="miles" type="number" 
          placeholder="miles"
          onChange={onChange}
          disabled={!inverted}
          />
      </>
      <button onClick={reset}>Reset</button>
      <button onClick={onInvert}>{inverted ? "Turn back" : "Invert"}</button>
      
    </>
  );

}
function App() {
  const [index, setIndex] = useState("xx");
  const onSelect = (event) => {
    setIndex(event.target.value);
  }
  return (
    <>
      <h1>Super Converter</h1>
      <select onChange={onSelect}>
        <option value="xx">Select your units</option>
        <option value="0">Minutes & Hours</option>
        <option value="1">Km & Miles</option>
      </select>
      <hr></hr>
      {index === "xx" ? "Please select your units" : null}
      {index === "0" ? <MinutesToHours/> : null}
      {index === "1" ? <KmToMiles/> : null}
    </>
  );
}





export default App;

0개의 댓글