[리액트] 노마드코더 거리변환기(Km to Miles) 복습

초보자의 입장에서 적은 내용으로, 틀리거나 정확하지 않을 수 있습니다.

 

[리액트] 노마드코더 거리변환기(Km to Miles) 복습

공부 기간 : 22/03/30

---

import { useState } from "react";

import "./App.css";

function Km_to_miles() {
  const [number, setNumber] = useState("");
  const [inverted, setInverted] = useState(false);
  function onChange(event) {
    setNumber(event.target.value);
  }

  const onSubmit = function (event) {
    event.preventDefault();
  };
  const onClick = () => {
    setInverted((current) => !current);
    // 파라미터는 자동으로 inverted로 지정된다.
  };
  return (
    <>
      <h1>{inverted ? "miles to km" : "km to miles"}</h1>
      <form onSubmit={onSubmit}>
        <input
          placeholder="숫자를 입력하세요"
          value={number}
          onChange={onChange}
        />
        <span>{inverted ? "miles" : "km"}</span>
      </form>
      <h2>
        = {inverted ? number * 1.609 : number / 1.609}
        {inverted ? "km" : "miles"}
      </h2>
      <button onClick={onClick}>
        {inverted ? "km to miles" : "miles to km"}
      </button>
    </>
  );
}

function Minutes_to_hours() {
  const [number, setNumber] = useState("");
  const [inverted, setInverted] = useState(false);
  function onChange(event) {
    setNumber(event.target.value);
  }

  const onSubmit = function (event) {
    event.preventDefault();
  };
  const onClick = () => {
    setInverted((current) => !current);
    // 파라미터는 자동으로 inverted로 지정된다.
  };
  return (
    <>
      <h1>{inverted ? "hours to minutes" : "minutes to hours"}</h1>
      <form onSubmit={onSubmit}>
        <input
          placeholder="숫자를 입력하세요"
          value={number}
          onChange={onChange}
        />
        <span>{inverted ? "hours" : "minutes"}</span>
      </form>
      <h2>
        = {inverted ? number * 60 : number / 60}
        {inverted ? "minutes" : "hours"}
      </h2>
      <button onClick={onClick}>
        {inverted ? "minutes to hours" : "hours to minutes"}
      </button>
    </>
  );
}

function App() {
  const [page, setPage] = useState();
  const onSelect = (event) => {
    setPage(event.target.value);
  };
  return (
    <>
      <select onChange={onSelect}>
        <option value="0">변환기능 선택</option>
        <option value="1">km to miles / miles to km</option>
        <option value="2">minutes to hours / hours to minutes</option>
      </select>
      <hr />

      {page == 1 ? <Km_to_miles /> : null}
      {page == 2 ? <Minutes_to_hours /> : null}

    </>

    //
  );
}

export default App;

 

해결 방법

1. form, input 태그를 사용해 숫자 입력칸 만들기

2. useState 사용해 입력칸 내부의 숫자를 state에 저장

3. state에 저장된 숫자를 변환하는 기능 만들기(km -> miles)

4. km->miles, miles ->km 변환 버튼 만들기

까지 생각해두고 더 필요한 부분은 그때그때 추가

 

비고

이전에 배웠던 내용을 가지고 복습 차원에서 코드를 다시 작성해봤습니다.

 

* memo

1. if문은 주로 삼항연산자로 사용한다.
2. 컴포넌트의 이름 맨 앞글자는 대문자로 설정한다.

3. select box의 사용

(option태그의 경우 value를 직접 설정하지 않으면 innertext부분이 value로 자동설정된다. value를 직접 설정해줄 수도 있다)