Dev study and notes

노마드코더 ReactJS로 영화 웹 서비스 만들기 03 무료강좌 본문

Building & Learning/ReactJS영화웹서비스만들기

노마드코더 ReactJS로 영화 웹 서비스 만들기 03 무료강좌

devlunch4 2025. 2. 6. 22:11
반응형

노마드코더 ReactJS로 영화 웹 서비스 만들기 03 무료강좌

JSX와 React 모드 간단 설명

  • JSX에서 HTML 속성 이름
    • JSX는 JavaScript와 HTML의 예약어 충돌을 피하기 위해 속성 이름을 약간 다르게 사용합니다.
      • class → className
      • for → htmlFor
    • JSX: <div id="root"></div>
    • javascript: React.createElement('div', { id: 'root' });
  • React 모드
    • Development 모드: 개발 중에는 버그를 쉽게 찾을 수 있도록 자세한 에러 메시지를 제공합니다.
    • Production 모드: 배포용으로 최적화되어 에러 메시지를 간소화하고 성능을 높입니다.

​

더 쉽게 말하면, JSX는 HTML을 JavaScript에서 사용하기 편리하게 변형한 것이고, React는 개발과 배포 상황에 맞게 동작을 다르게 해줍니다!.

​

최종 HTML 소스

최신 react 가이드 적용 수정 완료!

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Document</title>
</head>

<body>
  <div id="root"></div>
</body>

<!-- <script crossorigin src="https://unpkg.com/react@18.3.0/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react@18.3.0/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18.3.0/umd/react-dom.production.min.js"></script> -->
<script crossorigin src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>

<script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel">
  function MinutesToHours() {
    const [amount, setAmount] = React.useState(0);
    const [inverted, setInverted] = React.useState(false);
    const onChange = (event) => {
      setAmount(event.target.value);
    };
    const reset = () => setAmount(0);
    const onInvert = () => {
      reset();
      setInverted((current) => !current);
    }
    return (
      <div>
        <div>
          <label htmlFor="minutes">Minutes</label>
          <input
            value={inverted ? amount * 60 : amount}
            id="minutes"
            placeholder="Minutes"
            type="number"
            onChange={onChange}
            disabled={inverted}
          />
        </div>

        <div>
          <label htmlFor="hours">Hours</label>
          <input
            id="hours"
            placeholder="Hours"
            type="number"
            value={inverted ? amount : Math.round(amount / 60)}
            disabled={!inverted}
            onChange={onChange}
          />
        </div>

        <button onClick={reset}>Reset</button>
        <button onClick={onInvert}>
          {inverted ? "Turn back" : "Invert"}
        </button>
      </div>
    );
  }
  function KmToMiles() {
    const [amount, setAmount] = React.useState(0);
    const [inverted, setInverted] = React.useState(false);
    const onChange = (event) => {
      setAmount(event.target.value);
    };
    const reset = () => setAmount(0);
    const onInvert = () => {
      reset();
      setInverted((current) => !current);
    }
    return (
      <div>
        <div>
          <label htmlFor="km">Km</label>
          <input
            value={inverted ? (amount / 0.621371).toFixed(2) : amount}
            id="km"
            placeholder="Km"
            type="number"
            onChange={onChange}
            disabled={inverted}
          />
        </div>

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

        <button onClick={reset}>Reset</button>
        <button onClick={onInvert}>
          {inverted ? "Turn back" : "Invert"}
        </button>
      </div>
    );
  }
  
  function App() {
    const [index, setIndex] = React.useState("xx");
    const onSelect = (event) => {
      //console.log(event.target.value);
      setIndex(event.target.value);
    };
    return (
      <div>
        <h1>Super Converter</h1>
        <select value={index} onChange={onSelect}>
          <option value="xx">Select your units</option>
          <option value="0">Minutes & Hours</option>
          <option value="1">Km & Miles</option>
        </select>
        <hr />
        {index === "xx" ? "Please select your unit." : null}
        {index === "0" ? <MinutesToHours /> : null}
        {index === "1" ? <KmToMiles /> : null}
      </div>
    );
  }
  // const root = document.getElementById("root");
  // ReactDOM.render(<App />, root);
  const rootElement = document.getElementById("root");
  const root = ReactDOM.createRoot(rootElement);
  root.render(<App />);
</script>

</html>

기본적인 리액트 코드 소스를 작성하하게 되었고, 이해를 하게 됩니다.

위 소스에 대해 간단 설명과 요약을 다시 적어봅니다.

MinutesToHours 컴포넌트

**사용자가 입력한 분(minutes)을 시간(hours)으로 변환합니다.**

* 상태 관리: React.useState를 이용하여 입력 값과 변환 방향을 저장합니다.

* 이벤트 핸들러: onChange와 onInvert로 입력 값을 감지하고 변환 방향을 변경합니다.

​

일부 소스를 참고해보고자 위 내용중 "분" 부분의 소스를 적어보았습니다.

<label htmlFor="minutes">Minutes</label>
<input
  value={inverted ? amount * 60 : amount}
  id="minutes"
  placeholder="Minutes"
  type="number"
  onChange={onChange}
  disabled={inverted}
/>

위 코드에서 value 속성은 현재 상태에 따라 다르게 설정됩니다.

KmToMiles 컴포넌트

킬로미터를 마일로 변환하거나 반대로 변환합니다.

 <div>
          <label htmlFor="km">Km</label>
          <input
            value={inverted ? (amount / 0.621371).toFixed(2) : amount}
            id="km"
            placeholder="Km"
            type="number"
            onChange={onChange}
            disabled={inverted}
          />
</div>

**핵심 로직**

* 1Km = 0.621371 마일

* amount * 0.621371 또는 amount / 0.621371로 값을 계산합니다.

​

끝!

반응형
저작자표시 비영리 동일조건

'Building & Learning > ReactJS영화웹서비스만들기' 카테고리의 다른 글

노마드코더 ReactJS로 영화 웹 서비스 만들기 01 02 무료강좌  (0) 2025.02.06
'Building & Learning/ReactJS영화웹서비스만들기' Related Articles more
Comments