Day 2 - ReactJS로 영화 웹 서비스 만들기

14252 단어 ReactDOM코딩JSXhtmlReactJavaScript

사이트 : 노마드코더
강의 : ReactJS로 영화 웹 서비스 만들기
시각 : 2022.04.18


◆ 완료한 강의 :

  • #3 [2021 UPDATE] STATE: #3.0 Understanding State ~ #3.8 Recap

1. State활용

const [] = React.useState()

사용하면 Array 한개가 생김.
[ 담을 데이터용 변수, 담을 데이터를 처리할 함수용 변수] 이렇게.
두번째 항에 '함수'는 무슨 값을 넣던 업데이트 해준 후 리렌더링 시켜줌


버튼을 '클릭'하면 카운트를 하기

return 문을 사용할 때는 최상위 태그 아무거나 하나가 필요함
(보통 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해서 Mins로 보여줌 (입력 비활성화)

'리셋 버튼'과 '인버트 버튼(활성화를 서로 바꾸는 스위치)'도 생성 

    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);
[boj] (s3) 9095 1,2,3 더하기
[Project] Pre-onboarding: Sir.Loin

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage