'React JS' 태그의 글 목록

React JS에 해당되는 글 2건

2024.01.02 [Nomad] ReactJS로 영화 웹 서비스 만들기 2 2
2024.01.01 [Nomad] ReactJS로 영화 웹 서비스 만들기 1 4

[Nomad] ReactJS로 영화 웹 서비스 만들기 2

웹/React.js 2024. 1. 2. 09:00

노마드코더 강의 2일차.

심심해서 만들어보는 React JS 강의 수강

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

1. 준비물

> 바닐라 JS에 대한 기초 지식, Visual Studio Code

> 바닐라 JS 기초 강의 참고(무료)

> React JS : https://unpkg.com/react@18/umd/react.production.min.js

> React-Dom : https://unpkg.com/react-dom@18/umd/react-dom.production.min.js

> Babel : https://unpkg.com/@babel/standalone/babel.min.js

* Minutes <-> Hours 단위 변환 계산기 샘플 만들어보기

1. Minutes <-> Hours 단위 변환 계산기 (기초)
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <!-- <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script> -->
  <!-- 운영모드 React : React JS 엔진 역할-->
  <!-- <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> -->
  <!-- 운영모드 React-dom : 생성된 React 요소를 HTML에 배치하는 역할-->
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <!--개발모드 React -->
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <!--개발모드 React-dom-->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- JSX 인식을 위한 Babel -->
  <script type="text/babel">
    function App() {
      const [amount, setMinutes] = React.useState();
      const [flipped, setFlipped] = React.useState(false);
      const onChange = (event) => {
        setMinutes(event.target.value);
      };
      const reset = () => setMinutes(0);
      const onFlip = () => {
        reset();
        setFlipped((current) => !current);
      };
      return (
        <div>
          <h1>Super Converter</h1>
          <div>
            <label htmlFor="minutes">Minutes</label>
            <input
              value={flipped ? amount * 60 : amount}
              id="minutes"
              placeholder="Minutes"
              type="number"
              onChange={onChange}
              disabled={flipped}
            />
          </div>
          <div>
            <label htmlFor="hours">Hours</label>
            <input
              value={flipped ? amount : Math.round(amount / 60)}
              id="hours"
              placeholder="Hours"
              type="number"
              onChange={onChange}
              disabled={!flipped}
            />
          </div>
          <button onClick={reset}>Reset</button>
          <button onClick={onFlip}>Flip</button>
        </div>
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

2. Minutes <-> Hours, Km <-> Miles 단위 변환 계산기
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <!-- <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script> -->
  <!-- 운영모드 React : React JS 엔진 역할-->
  <!-- <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> -->
  <!-- 운영모드 React-dom : 생성된 React 요소를 HTML에 배치하는 역할-->
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <!--개발모드 React -->
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <!--개발모드 React-dom-->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- JSX 인식을 위한 Babel -->
  <script type="text/babel">
    function MinutesToHours() {
      const [amount, setMinutes] = React.useState();
      const [inverted, setInverted] = React.useState(false);
      const onChange = (event) => {
        setMinutes(event.target.value);
      };
      const reset = () => setMinutes(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
              value={inverted ? amount : Math.round(amount / 60)}
              id="hours"
              placeholder="Hours"
              type="number"
              onChange={onChange}
              disabled={!inverted}
            />
          </div>
          <button onClick={reset}>Reset</button>
          <button onClick={OnInvert}>
            {inverted ? "Turn back" : "Invert"}
          </button>
        </div>
      );
    }
    function KmToMiles() {
      const [distance, setMiles] = React.useState();
      const [inverted, setInverted] = React.useState(false);
      const onChange = (event) => {
        setMiles(event.target.value);
      };
      const reset = () => setMiles(0);
      const OnInvert = () => {
        reset();
        setInverted((current) => !current);
      };
      return (
        <div>
          <div>
            <label htmlFor="Km">Km</label>
            <input
              value={inverted ? distance * 1.609 : distance}
              id="Km"
              placeholder="Km"
              type="number"
              onChange={onChange}
              disabled={inverted}
            />
          </div>
          <div>
            <label htmlFor="Miles">Miles</label>
            <input
              value={inverted ? distance : distance / 1.609}
              id="Miles"
              placeholder="Miles"
              type="number"
              onChange={onChange}
              disabled={!inverted}
            />
          </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) => {
        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 units" : null}
          {index === "0" ? <MinutesToHours /> : null}
          {index === "1" ? <KmToMiles /> : null}
        </div>
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

3. React Js (Props, Memorized)
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <!-- <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script> -->
  <!-- 운영모드 React : React JS 엔진 역할-->
  <!-- <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> -->
  <!-- 운영모드 React-dom : 생성된 React 요소를 HTML에 배치하는 역할-->
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <!--개발모드 React -->
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <!--개발모드 React-dom-->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- JSX 인식을 위한 Babel -->
  <script type="text/babel">
    function Btn({ text, changeValue }) {
      //Btn(props) : 파라미터로 전달받는 properties를 의미. props 대신 shorcut으로 사용하는게 간편하다.
      /* 
      아래 둘은 같은 기능이다 
      Btn(props)로 선언 시 {props.text}로 사용
      Btn({text})로 선언 시 {text}로 사용 
      */
      return (
        <button
          onClick={changeValue}
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
          }}
        >
          {text}
        </button>
      );
    }
    const MemorizedBtn = React.memo(Btn); //React Js의 memorized 기능을 사용해서 state에 따라 변하지 않는 엘리멘트는 불필요한 렌더링 방지를 위해 memorized 사용(props가 변할때만 렌더링)
    function App() {
      const [value, setValue] = React.useState("Save Changes");
      const changeValue = () => setValue("Revert Changes");
      return (
        <div>
          <MemorizedBtn text={value} changeValue={changeValue} />
          <MemorizedBtn text="Continue" />
        </div>
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

4. React Js (Props, propTypes 사용법)
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <!-- <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script> -->
  <!-- 운영모드 React : React JS 엔진 역할-->
  <!-- <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> -->
  <!-- 운영모드 React-dom : 생성된 React 요소를 HTML에 배치하는 역할-->
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <!--개발모드 React -->
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <!--개발모드 React-dom-->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- JSX 인식을 위한 Babel -->
  <script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
  <!-- props로 넘어오는 속성의 타입을 지정 후 틀릴 값 전달 시 확인 가능하다 -->
  <script type="text/babel">
    function Btn({ text, fontSize }) {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
            fontSize,
          }}
        >
          {text}
        </button>
      );
    }
    Btn.propTypes = {
      text: PropTypes.string.isRequired, //isRequired : 해당 prop은 필수 값을 의미
      fontSize: PropTypes.number,
    };
    function App() {
      return (
        <div>
          <Btn text="Save Changes" fontSize={18} />
          <Btn text={"Continue"} />
        </div>
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

'웹 > React.js' 카테고리의 다른 글

[Nomad] ReactJS로 영화 웹 서비스 만들기 6 (4)	2024.01.07
[Nomad] ReactJS로 영화 웹 서비스 만들기 5 (83)	2024.01.06
[Nomad] ReactJS로 영화 웹 서비스 만들기 4 (79)	2024.01.05
[Nomad] ReactJS로 영화 웹 서비스 만들기 3 (75)	2024.01.04
[Nomad] ReactJS로 영화 웹 서비스 만들기 1 (4)	2024.01.01

[Nomad] ReactJS로 영화 웹 서비스 만들기 1

웹/React.js 2024. 1. 1. 18:59

노마드코더 강의 1일차.

심심해서 만들어보는 React JS 강의 수강

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

1. 준비물

> 바닐라 JS에 대한 기초 지식, Visual Studio Code

> 바닐라 JS 기초 강의 참고(무료)

> React JS : https://unpkg.com/react@18/umd/react.production.min.js

> React-Dom : https://unpkg.com/react-dom@18/umd/react-dom.production.min.js

> Babel : https://unpkg.com/@babel/standalone/babel.min.js

Jsx format로 자동 변환
1. Vscode > Prettier - Code formatter 설치
2. Ctrl + P > User settings
3. Default formatter 검색
4. 없음 -> Prettier - Code formatter 변경
5. Format on Save 검색
6. 체크
7. Ctrl + S 로 저장 시 자동으로 구조변환됨

* Vanilla Js vs React Js 코드 비교

1. Vanilla JS
<!DOCTYPE html>
<html>
    <body>
        <span>Total Clicks: 0</span>
        <button id="btn">Click me!</button>
    </body>
    <script>
        let counter = 0;
        const button = document.getElementById("btn");
        const span = document.querySelector("span");
        function handleClick() {
            counter += 1;
            span.innerHTML = 'Total Clicks: '+counter;
        }
        button.addEventListener("click", handleClick)
    </script>
</html>

2. React Js
<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>      <!--React : React JS 엔진 역할-->
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> <!--React-dom : 생성된 React 요소를 HTML에 배치하는 역할-->
    <script>
        const root = document.getElementById("root");
        const h3 = React.createElement(
            "h3",
            {
                id: "title",
                onMouseEnter: () => console.log("mouse enter"),
            },
            "Hello I'm a span"
        );       //span element 생성
        const btn = React.createElement(
            "button",
            {
                onClick: () => console.log("I'm clicked"),
                style: {
                    backgroundColor: "tomato",
                }
            },
            "Click me"
        );
        const container = React.createElement("div", null, [h3, btn]);
        ReactDOM.render(container, root);
    </script>
</html>

- React JS가 좋은 점은 addEvenetListener를 각각 선언할 필요가 없이, 각 요소별로 기재하면 됨

3. React Js (JSX, Babel 사용)
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <!--React : React JS 엔진 역할-->
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <!--React-dom : 생성된 React 요소를 HTML에 배치하는 역할-->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- JSX 인식을 위한 Babel -->
  <script type="text/babel">
    const root = document.getElementById("root");
    /* 1. React 방식
        const h3 = React.createElement(
            "h3",
            {
                id: "title",
                onMouseEnter: () => console.log("mouse enter"),
            },
            "Hello I'm a span"
        );       //span element 생성 
        */
    // 2. JSX 방식 (JavaScript Extension. HTML 문법과 흡사하기 때문에 React 방식보다 익숙함)
    const Title = (
      <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
        Hello I'm a span
      </h3>
    );
    /* 
        const btn = React.createElement(
            "button",
            {
                onClick: () => console.log("I'm clicked"),
                style: {
                    backgroundColor: "tomato",
                }
            },
            "Click me"
        );
        */
    const Button = (
      <button
        style={{
          backgroundColor: "tomato",
        }}
        onClick={() => console.log("I'm clicked")}
      >
        "Click me"
      </button>
    );
    const container = React.createElement("div", null, [Title, Button]);
    ReactDOM.render(container, root);
  </script>
</html>

4. React Js (렌더링 할 때에도 JSX 형태로 사용)
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <!--React : React JS 엔진 역할-->
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <!--React-dom : 생성된 React 요소를 HTML에 배치하는 역할-->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- JSX 인식을 위한 Babel -->
  <script type="text/babel">
    const root = document.getElementById("root");
    const Title = () => (
      //arrow function
      <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
        Hello I'm a span
      </h3>
    );
    const Button = () => (
      <button
        style={{
          backgroundColor: "tomato",
        }}
        onClick={() => console.log("I'm clicked")}
      >
        Click me
      </button>
    );
    //Component는 반드시 대문자로 시작해야함(사용자 정의 tag가 됨)
    const Container = () => (
      <div>
        <Title />
        <Button />
      </div>
    );
    ReactDOM.render(<Container />, root);
  </script>
</html>

5. React Js (변경 시 마다 Render 하도록 추가. 좋은 소스는 아님)
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <!--React : React JS 엔진 역할-->
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <!--React-dom : 생성된 React 요소를 HTML에 배치하는 역할-->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- JSX 인식을 위한 Babel -->
  <script type="text/babel">
    const root = document.getElementById("root");
    let counter = 0;
    function countUp() {
      counter += 1;
      render();
    }
    function render() {
      ReactDOM.render(<Container />, root);
    }
    function Container() {
      return (
        <div>
          <h3>Total Clicks: {counter}</h3>
          <button onClick={countUp}>Click me</button>
        </div>
      );
    }
    render();
  </script>
</html>

6. React Js (userState를 사용해서 ReRednering 까지 modifier로 수행하도록 처리)
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <!--React : React JS 엔진 역할-->
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <!--React-dom : 생성된 React 요소를 HTML에 배치하는 역할-->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- JSX 인식을 위한 Babel -->
  <script type="text/babel">
    const root = document.getElementById("root");
    function App() {
      const [counter, setCounter] = React.useState(0);
      const onClick = () => {
        //   setCounter(counter + 1); //값을 바꾸고 리렌더링함
        setCounter((current) => current + 1); //counter+1과 동일한 결과를 출력하지만 current가 확실히 현재 값이라는 것을 보장할 수 있다 (다른 값에 의해 counter가 변경될 수 있기 때문)
      };
      return (
        <div>
          <h3>Total Clicks: {counter}</h3>
          <button onClick={onClick}>Click me</button>
        </div>
      );
    }
    ReactDOM.render(<App />, root);
  </script>
</html>

'웹 > React.js' 카테고리의 다른 글

[Nomad] ReactJS로 영화 웹 서비스 만들기 6 (4)	2024.01.07
[Nomad] ReactJS로 영화 웹 서비스 만들기 5 (83)	2024.01.06
[Nomad] ReactJS로 영화 웹 서비스 만들기 4 (79)	2024.01.05
[Nomad] ReactJS로 영화 웹 서비스 만들기 3 (75)	2024.01.04
[Nomad] ReactJS로 영화 웹 서비스 만들기 2 (2)	2024.01.02

						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

검색결과 리스트

React JS에 해당되는 글 2건

글

[Nomad] ReactJS로 영화 웹 서비스 만들기 2

노마드코더 강의 2일차.

'웹 > React.js' 카테고리의 다른 글

설정

트랙백

댓글

글

[Nomad] ReactJS로 영화 웹 서비스 만들기 1

노마드코더 강의 1일차.

'웹 > React.js' 카테고리의 다른 글

설정

트랙백

댓글

Mr.Walter

CATEGORY

TAG

RECENT POSTS

RECENT COMMENT

RECENT TRACKBACK

LINK

ARCHIVE

NOTICE

CALENDAR

COUNTER

티스토리툴바