Day 2-ReactJSを使用した映画Webサービスの作成


サイト:エンコーディングなし
講座:RealtJSを用いた映画Webサービスの作成
時間:2022.04.18
◆完成した講座:
  • #3 [2021 UPDATE] STATE: #3.0 Understanding State ~ #3.8 Recap
  • 1.利用状態


    const [] = React.useState()
    使用後にArrayが生成されます.
    [読み込むデータの変数、読み込むデータの関数の変数]のように
    2番目の項目では、関数(Function)は任意の値を更新した後に再レンダリングされます.
    ボタンをクリックしてカウント
    return文を使用する場合は、1つ以上のトップレベルラベルが必要です.
    (通常divラベルが使用されます.)
    <!DOCTYPE html>
    <html>
      <body>
        <div id="root"></div>
        // JSX는 감싸는 부모태그가 있어야 되서 의례적으로 하나 만듬
      </body>
      <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script type="text/babel"> // 번역하여 HTML로 전달해주는 BABEL
        const root = document.getElementById("root");
        function App() {
          const [counter, setCounter] = React.useState(0);
          // counter는 data가 저장될 변수
          // setCounter는 count를 계산하기 위한 modifier 함수
          const onClick = () => {
            //setCounter(counter + 1);
            // 다른 곳에서 counter를 업데이트 해버릴 수 있어 좋은 방법이 아님
            // 아래 방법이 실수할 일 없이 안전함
            setCounter((current) => current + 1);
            //current는 '현재의 값'을 뜻함.
          };
          return (
            <div>
              <h3>Total clicks: {counter}</h3>
              <button onClick={onClick}>Click Me</button>
            </div>
          );
        }
        ReactDOM.render(<App />, root);
        // reactDOM에 렌더링. root(div)에 함수 App을 집어넣음
    
        // render -> 사용자에게 보여준다.
    
        // JSX는 변수를 전부 '대문자'로 시작해야 함.
        // 안그러면 일반 태그 같은걸로 인식함
      </script>
    </html>
    

    2-1. Mins<->Hoursユニットコンバータ練習

  • Minutesフリー入力(入力可能)->分割60 Hours(入力無効)
  • として表示
    入力
  • Hours(入力可能)->60をミリ秒で乗算(入力無効)
  • [リセットボタン](Reset Button)と[挿入ボタン](Insert Button)も作成します(アクティブなスイッチを交換します).
        function App() {
          const [amount, setAmounts] = React.useState();
          const [inverted, setinverted] = React.useState(false);
          // inverted의 기본 값은 'false'
        
          const onChange = (event) => {
            setAmounts(event.target.value);
            // console.log(event)해서 target에서 value를 확인했음
          };
        
          const reset = () => setAmounts(0);
        
          const onFlip = () => {
            reset();
            setinverted((current) => !current);
          }; //리셋 + disabled 값을 바꿈
        
          return (
            <div>
              <h1 className="hi">Super Converter</h1>
              
              <div>
                <label htmlFor="minutes">Minutes</label>
                <input
                  value={inverted ? amount * 60 : amount}
                  // if inverted가 true 상태면 disabled 됨.
                  // 그러니 아래에 시간단위로 입력 감지된 값 x 60 해줌.
                  // inverted가 false면 활성화됨. 그땐 원래처럼
                       
                  id="minutes"
                  placeholder="Minutes"
                  type="number"
                  onChange={onChange}
                  //onChange는 '변화가 감지되면'
                  disabled={inverted}
                  //disabled={inverted === true}
                />
              </div>
              
              <div>
                <label htmlFor="hours">Hours</label>
                <input
                  value={inverted ? amount : Math.round(amount / 60)}
                  // 삼항 연산자 if else와 같은 형태.
                  // if inverted가 true 상태면 활성화됨. 그땐 amount로 출력
                  // if inverted가 false면 비활성화됨. 그땐 Math...로 출력
                       
                  id="hours"
                  placeholder="Hours"
                  type="number"
                  onChange={onChange}
                  disabled={!inverted}
                  //disabled={inverted === false}
                />
              </div>
              <button onClick={reset}>Reset</button>
              <button onClick={onFlip}>{inverted ? "Turn back" : "Invert"}</button>
            </div>
          );
        }
        const root = document.getElementById("root");
        ReactDOM.render(<App />, root);