[Nomad Coders](기록용) React JS로 영화 웹 서비스 만들기

📌2.6 JSX
JSX 란?
예시 보기
Babel 이란?
관련 코드 보기
📌2.7 JSX part Two
함수 표기법
주의할 점
📌3.5 Inputs and State
배포모드 -> 개발모드 변경
📌4.1 Memo
사용 이유
강의에서 주의할 점
📌4.2 Prop Types
다운로드
적용법
사용목적
📌5.0 Introduction ~ 5.1 Tour of CRA
React 설치 방법
Prop Types 설치 방법
Global 이 아닌 module 별로 스타일 지정
📌7.4 Movie App part Two
React Router 설치
📌7.5 React Router
React Router 문법
📌7.7 Publishing
Github Pages 업로드 / 배포

728x90

📌2.6 JSX

JSX 란?

문자열도, HTML도 아닌 JavaScript 를 확장한 문법입니다. React에서 JSX 사용이 필수가 아니지만, 대부분의 사람들은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 도움이 된다고 생각하여 사용이 됩니다.

예시 보기

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

두 예시는 동일한 기능을 합니다. 다만, 위의 예시는 JSX를 통해 표현을 했고 밑의 예시는 React.createElement() 문법을 사용하여 표현하였습니다.

Babel 이란?

ES6 및 JSX 코드가 올바르게 표시되도록 하기 위해 편집기에 Babel 언어 설정을 하게 됩니다.

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

다음과 같이 라이브러리를 설치해줍니다. 그리고 중요한 점은 JSX 표현식이 사용된 script에 type을 지정해 주는 것입니다.

  <script type="text/babel">
    const root = document.getElementById("root");
    const Title = (
      <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
        Hello I'm a span
      </h3>
    );
  </script>

📌2.7 JSX part Two

함수 표기법

 <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <script type="text/babel">
    const root = document.getElementById("root");
    function Title() {
      return (
        <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
          Hello I'm a span
        </h3>
      );
    }

    const Button = () => (
      <button
        style={{ backgroundColor: "tomato" }}
        onClick={() => console.log("im clicked")}
      >
        Click me
      </button>
    );

    const Container = () => (
      <div>
        <Title />
        <Button />
      </div>
    );
    ReactDOM.render(<Container />, root);
  </script>
</html>

표기방식 1) function 함수명(){ return }
표기방식 2) const 함수명 = () => ()

주의할 점

Component는 시작이 대문자입니다. 만약 <Button />이 아니라 <button> 으로 기재한다면 정의해둔 function 이 아닌 <button></button>란 HTML 태그의 기능으로 인식하게 될 것입니다.

  <script type="text/babel">
    const Button = () => (
      <button
        style={{ backgroundColor: "tomato" }}
        onClick={() => console.log("im clicked")}
      >
        Click me
      </button>
    );
    const Container = (
      <div>
        <Button />
      </div>
    );
      ReactDOM.render(Container, root);
  </script>
</html>

<참고자료>

https://nomadcoders.co/

노마드 코더 Nomad Coders

코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요!

nomadcoders.co

https://ko.legacy.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

A JavaScript library for building user interfaces

ko.legacy.reactjs.org

https://babeljs.io/docs/babel-standalone

@babel/standalone · Babel

@babel/standalone provides a standalone build of Babel for use in browsers and other non-Node.js environments.

babeljs.io

📌3.5 Inputs and State

배포모드 -> 개발모드 변경

배포 모드

production.min

  <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>

개발 모드

development

  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>

JSX는 class는 className으로 for은 htmlFor로 바꿔쓴다

<div>
  <h1 className="hi">Super Converter</h1>
  <label htmlFor="minutes">Minutes</label>
</div>

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <script type="text/babel">
    function App() {
      const [minutes, setMinutes] = React.useState();
      const onChange = (e) => {
        setMinutes(e.target.value);
      };
      return (
        <div>
          <h1 className="hi">Super Converter</h1>
          <label htmlFor="minutes">Minutes</label>
          <input
            value={minutes}
            id="minutes"
            placeholder="Minutes"
            type="number"
            onChange={onChange}
          />
          <h4>You want to convert {minutes}</h4>
          <label htmlFor="hours">Hours</label>
          <input id="hours" placeholder="Hours" type="number" />
        </div>
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

📌4.1 Memo

사용 이유

컴포넌트를 memo((Component, arePropsEqual?)) 형태로 감싸게 되면 컴포넌트의 memorized 버전을 얻을 수 있다. 이 컴포넌트는 일반적으로 부모 컴포넌트가 리렌더링(re-render)가 되더라도 props가 변경되지 않았다면 리렌더링이 되지 않는다.
즉, 불필요한 리렌더링을 줄이기 위해 사용 되며, 성능 문제를 사전에 방지하는 역할을 한다.

: Component 란, memorize 하려고 하는 컴포넌트 대상이다.
: arePropsEqual 란, optional 값이며 컴포넌트가 이전 props와 동일한 결과를 렌더링하고 새로운 props 에도 이전과 같은 방식으로 동작하는 경우 true를 반환하며 아닌 경우 false를 반환하게 된다.

강의에서 주의할 점

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- JSX 로 이해할 수 있게 변환하는 babel script -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <script type="text/babel">
    function Btn({ text, onClick }) {
      console.log(text, "was rendered");
      return (
        <button
          onClick={onClick}
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: "0",
            borderRadius: 10,
          }}
        >
          {text}
        </button>
      );
    }
    const MemorizedBtn = React.memo(Btn);
    function App() {
      const [value, setValue] = React.useState("Save Changes");
      const changeValue = () => setValue("Revert Changes");
      return (
        <div>
          <MemorizedBtn text={value} onClick={changeValue} />
          <MemorizedBtn text="Continue" />
        </div>
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

1. <MemorizedBtn onClick={}> 은 onClick 이벤트를 뜻하는 것이 아닌 단순 props 이름이다. onClick이 아닌 click 등 다른 이름으로 변경할 수 있다.

2. onClick 이벤트 리스너로 활용하고 싶다면 해당 컴포넌트의 props로 이벤트 리스너를 등록하면 된다.

📌4.2 Prop Types

다운로드

  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>

적용법

  <script type="text/babel">
    function Btn({ text, fontSize = 12 }) {
      return (
     	...
      );
    }
    Btn.propTypes = {
      text: PropTypes.string.isRequired,
      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>

컴포넌트.propTypes = {
// PropTypes. 와 같이 조건 추가
}

사용목적

1. Prop은 component에 보내지는 argument 이다.

2. PropType을 이용하여 보내지는 prop에 type을 지정할수 있으며 validation 과 같은 역할은 한다고 볼 수 있다.

잘못된 type이 prop 에 전달된다면 React는 에러메시지를 띄우게 된다.

📌5.0 Introduction ~ 5.1 Tour of CRA

React 설치 방법

1. node js 사용자 버전 설치
2. 바탕화면, 내문서 등 원하는 곳에서 새로운 폴더 생성(이름: react-for-beginners)
3. vscode에서 해당 폴더 열어줌
4. vscode 상단 메뉴에서 Terminal - New Terminal 클릭 (명령어로 vscode 제어 가능)
5. node -v 입력 후 현재 버전이 표시되면 node js 설치 성공한 것
6. terminal에 npx create-react-app . 입력하고 엔터(현재 폴더에 개발환경을 셋팅하겠다는 뜻)
*이 때 뭐 설치하겠냐고 하면 y 눌러서 설치해주시면 됩니다.
7. Success!가 뜨면 설치 완료

(출처:monoch729)

Prop Types 설치 방법

명령어 ) npm i prop-types

Global 이 아닌 module 별로 스타일 지정

과정

Button.js에서 사용할 css 생성


1. 클래스 이름으로 스타일 지정	2. Button.js 에서 css import 하기 3. 스타일을 적용할 html 역할을 하는 곳에 className={styles.btn} 와 같이 className 할당하기

결과

다음과 같인 Random class 값이 주어짐

📌7.4 Movie App part Two

React Router 설치

npm install react-router-dom

📌7.5 React Router

React Router 문법

react-router-dom
npm i react-router-dom
@5.3.0
https://v5.reactrouter.com/web/guides/quick-start

react-router-dom 5버전 -> 버전6 바뀐 부분

1. Switch컴포넌트가 Routes컴포넌트로 대체되었습니다.
Switch -> Routes

2. Route컴포넌트 사이에 자식 컴포넌트를 넣지 않고, element prop에 자식 컴포넌트를 할당하도록 바뀌었습니다.
Route path="/" element={< Home / >}

react-router-dom 6버전 문서
https://reactrouter.com/docs/en/v6/getting-started/overview

(출처: Sugar)

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./routes/Home";
import Detail from "./routes/Detail";
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/hello"></Route>
        <Route path="/movie/:id" element={<Detail></Detail>}></Route>
        <Route path="/" element={<Home></Home>}></Route>
      </Routes>
    </Router>
  );
}

export default App;

react-router-dom 버전 6 이후부터는 다음과 같이 문법이 변경되었다.

📌7.7 Publishing

Github Pages 업로드 / 배포

설치팩 명령어
npm i gh-pages

build 명령어
npm run build

deploy 명령어
npm run deploy

Deploy 추가하기

package.json - "scripts" {} 에 deploy / predeploy 추가하기

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build",
    "predeploy": "npm run build"
  },
  
  
  ...
  
  
  ,
  "homepage": "https://깃허브 유저네임.github.io/깃 리포지토리 이름"

다음과 같이 scripts 에

"deploy": "gh-pages -d build",

"predeploy": "npm run build"

를 등록하면 npm run deploy 할 시 predeploy가 먼저 실행이 되고 그 후 deploy가 실행이 된다.

"homepage" 등록도 필요하다.

homepage는 github pages가 생성될 주소이다.

오류

만약, 빈 화면으로 나온다면 아래와 같은 경로를 App.js에 추가할 필요가 있다.

 <Route
  path={`${process.env.PUBLIC_URL}/`}
  element={<Home></Home>}
></Route>

path 경로를 다음과 같이 설정해준 후 다시 build 후 배포하면 정상적으로 작동이 된다.

728x90

'LANGUAGE > React' 카테고리의 다른 글

[Next.js] Next.js/React 에 Font Awesome Icon 적용하기/ 아이콘 추가하는 법 (0)	2024.06.19
[Error][Next.js] Invalid src prop ~ on `next/image` 해결 방법/ 외부 이미지 허가 설정하기 (0)	2024.06.18
[React] 클래스형 컴포넌트의 생명주기(life cycle) (0)	2024.06.05
[React] 실전형 리액트 Hooks 10 (0)	2024.06.04
[React] npm start 오류 / npm start 명령어 안됨 (0)	2024.05.29

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Deploy 추가하기

오류

'LANGUAGE > React' 카테고리의 다른 글

Deploy 추가하기

오류

'LANGUAGE > React' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역