React.JS) React.JS - 4. 거리 계산기 App 만들기

Sep 20, 2024

1. React 컴포넌트 생성

amount : 입력된 거리 값

flipped : 킬로미터와 마일 간 전환 여부


function App() {
  const [amount, setAmount] = React.useState(0);
  const [flipped, setFlipped] = React.useState(false);

2. 이벤트 핸들러 작성

onChange : 입력값이 변경될 때 호출되어 값을 업데이트함


const onChange = (event) => {
  setAmount(event.target.value);
};

const reset = () => setAmount(0);
const onFlip = () => {
  reset();
  setFlipped((current) => !current);
};

3. JSX를 사용하여 UI 구성


return (
  <div>
    <h1>거리 계산기</h1>
    <label htmlFor="kilometers">Kilometers</label>
    <input
      value={flipped ? (amount / 0.621371) : amount}
      id="kilometers"
      placeholder="Kilometers"
      type="number"
      onChange={onChange}
      disabled={flipped}
    />

    <label htmlFor="miles">Miles</label>
    <input
      value={flipped ? amount : (amount * 0.621371)}
      id="miles"
      placeholder="Miles"
      type="number"
      disabled={!flipped}
      onChange={onChange}
    />

    <button onClick={reset}>초기화</button>
    <button onClick={onFlip}>전환</button>
  </div>
);

4. ReactDOM을 사용하여 컴포넌트 렌더링


const root = document.getElementById("root");
ReactDOM.render(<App />, root);


<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>

  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

  <script type="text/babel">
    function App() {
      const [amount, setAmount] = React.useState(0);
      const [flipped, setFlipped] = React.useState(false);

      const onChange = (event) => {
        setAmount(event.target.value);
      };

      const reset = () => setAmount(0);
      const onFlip = () => {
        reset();
        setFlipped((current) => !current);
      };

      return (
        <div>
          <h1>거리 계산기</h1>
          <label htmlFor="kilometers">Kilometers</label>
          <input
            value={flipped ? (amount / 0.621371) : amount}
            id="kilometers"
            placeholder="Kilometers"
            type="number"
            onChange={onChange}
            disabled={flipped}
          />
          
          <label htmlFor="miles">Miles</label>
          <input
            value={flipped ? amount : (amount * 0.621371)}
            id="miles"
            placeholder="Miles"
            type="number"
            disabled={!flipped}
            onChange={onChange}
          />
          
          <button onClick={reset}>초기화</button>
          <button onClick={onFlip}>전환</button>
        </div>
      );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

return ( <div> <h1>거리 계산기</h1> <label htmlFor="kilometers">Kilometers</label> <input value={flipped ? (amount / 0.621371) : amount} id="kilometers" placeholder="Kilometers" type="number" onChange={onChange} disabled={flipped} /> <label htmlFor="miles">Miles</label> <input value={flipped ? amount : (amount * 0.621371)} id="miles" placeholder="Miles" type="number" disabled={!flipped} onChange={onChange} /> <button onClick={reset}>초기화</button> <button onClick={onFlip}>전환</button> </div> );

<!DOCTYPE html> <html lang="en"> <body> <div id="root"></div> </body> <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script> <script type="text/babel"> function App() { const [amount, setAmount] = React.useState(0); const [flipped, setFlipped] = React.useState(false); const onChange = (event) => { setAmount(event.target.value); }; const reset = () => setAmount(0); const onFlip = () => { reset(); setFlipped((current) => !current); }; return ( <div> <h1>거리 계산기</h1> <label htmlFor="kilometers">Kilometers</label> <input value={flipped ? (amount / 0.621371) : amount} id="kilometers" placeholder="Kilometers" type="number" onChange={onChange} disabled={flipped} /> <label htmlFor="miles">Miles</label> <input value={flipped ? amount : (amount * 0.621371)} id="miles" placeholder="Miles" type="number" disabled={!flipped} onChange={onChange} /> <button onClick={reset}>초기화</button> <button onClick={onFlip}>전환</button> </div> ); } const root = document.getElementById("root"); ReactDOM.render(<App />, root); </script> </html>