코딩하는라민

[React] 리액트(React) 시작하기 / JSX와 create-react-app 본문

Core/React

[React] 리액트(React) 시작하기 / JSX와 create-react-app

코딩하는라민 2023. 2. 21. 17:50
728x90
반응형

[React] 리액트(React) 시작하기 / JSX와 create-react-app

📌 리액트란?

사용자 인터페이스를 만들기 위한 라이브러리이다.

다른 라이브러리들과 함께 특정 환경을 렌더링하는데 사용한다.

 

→ 프레임워크 ❌ 라이브러리 ⭕

 

📌 자바스크립트와 다른점

리액트는 JSX 구문을 사용한다.

JSX 구문은 자바스크립트의 구문을 확장한 HTML과 유사한 코드이다.

 

📌 리액트 사용하기

리액트를 브라우저 환경에서 사용하기 위해서는 html 파일에 react 와 react-dom 스크립트를 넣어줘야한다.

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

 

📌 JSX

JSX 는 리액트와 함께 사용한다. 리액트에서 반드시 필요한 것은 아니다.

다만, JSX 를 사용하면 보다 코드가 더 간단해진다.

JSX 는 DOM 요소를 추상화한 자바스크립트 객체인 React 요소를 만드는 역할을 한다.

 

JSX 를 React 요소로 바꾸기 위해서는 Babel 과 같은 컴파일러가 필요하다.

아래의 사이트에서 직접 실습해볼 수 있다.

 

Babel · Babel

The compiler for next generation JavaScript

babeljs.io

 

const button = (
    <Button>
        Click
    </Button>
)

 

이 코드를 React 요소로 컴파일하면,

"use strict";

const button = /*#__PURE__*/React.createElement(
    Button, 
    null, 
    "Click"
);

이렇게 컴파일된다.

만약 JSX 를 쓰지 않으면 React.createElement 를 통해서 React 요소를 생성해야 하는 것이다.

 

📌 JSX 보간법(interpolation)

<div props={value}>this is {content}<div>

위와 같이 데이터를 끼워넣을 때 사용한다.

자바스크립트 ${ }  
리액트 { } 싱글 컬리브레이션
뷰 {{ }} 더블 컬리브레이션

 

 

📌 JSX 더 자세히 알아보기

 

JSX 이해하기 – React

A JavaScript library for building user interfaces

ko.reactjs.org

 

📌 툴체인 with create-react-app

React 를 이용하는 방법중에는 위의 방법처럼 브라우저 환경에서 작업하는 것과, 툴체인을 이용하는 방법이 있다.

create-react-app 이라는 툴체인을 이용해 애플리케이션 빌드에 더 많은 시간을 절약할 수 있다.

 

create-react-app 사용하기 위해서는 Node.js 가 설치되어 있어야 한다.

이 create-react-app 은 IE 은 사용 불가능하다. 이제부터 완전히 IE 은 고려하지 않을 것!

 

📌 CRA - Scaffolding

집을 짓기 위한 세팅을 말한다. 즉, 초기 뼈대를 만들어 주는 작업!

 

CRA 명령어 설명
start React 서버 실행
build 배포
text 테스트 러너 시작
eject create-react-app 이 관리하고 있던 패키지들을 사용자 정의할 수 있게 하는 옵션

eject 는 복구가 되지 않으므로 사용한다면 브랜치를 복사한 후 이동한 다음에 사용하는 등 신중하게 사용해야한다.

git 에 복구 시점을 만들어놓는 것이 중요하다.

 

📌 create-react-app 설치

npx create-react-app <프로젝트이름>

 

📌 create-react-app 실행

다음의 명령어를 통해서 React 서버를 시작할 수 있다.

npm start

 

⛔ 오류 해결
... project dependency tree ... 에 문제가 발생했다는 오류 메시지가 뜬다면 폴더 내부에 .env 파일을 만든 후
SKIP_PREFLIGHT_CHECK = true

 이 코드를 입력하고 저장하면 된다.

 

📌 최신 버전으로 업데이트하기

npm install react-scripts@latest

 

📌 create-react-app 의 초기 파일 구조

moz-todo-react
├── README.md
├── node_modules
├── package.json
├── package-lock.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

📁 public

정적인 파일들을 관리하는 곳

React 코드를 index.html 에 넣고 브라우저가 코드를 실행하게 한다.

 

📁 src

동적인 파일을 관리하는 곳

앞으로의 개발은 src 폴더 안에서 하게 된다.

 

📃 manifest.json

<meta
  name="description"
  content="리액트를 사용해 구성한 카운터 컴포넌트를 학습합니다."
/>

MDN "프로그레시브 웹 앱(PWA)라고 칭하는 웹 기술 모음집의 일부로서, 앱 스토어를 거치지 않고 장치의 홈 화면에 설치할 수 있는 웹사이트를 구성한다."

manifest 파일은 웹 애플리케이션은 모두 가지고 있어야 하는 파일이다.

이 파일을 통해 앱 아이콘에 보여지는 이름, 이미지 등을 설정할 수 있다.

 

Web app manifests | MDN

웹 앱 매니페스트(Web app manifest)는 프로그레시브 웹 앱(PWA)라고 칭하는 웹 기술 모음집의 일부로서, 앱 스토어를 거치지 않고 장치의 홈 화면에 설치할 수 있는 웹사이트를 구성합니다. 단순한 홈

developer.mozilla.org

 

📃 robots.txt

Disallow : 민감한 부분을 검색봇이 수집하지 못하도록 막아주는 역할

 

📃 index.html

주언어 바꿔주기

<html lang="ko-KR">
    ...

 

SEO 설정 - meta 태그의 description 내용 수정

<meta
  name="description"
  content="리액트를 사용해 구성한 카운터 컴포넌트를 학습합니다."
/>

 

📃 index.js

엔트리 파일

 

 

 

 

참고 : MDN 문서, 리액트 공식 문서, 멋쟁이사자처럼 4기 yamoo9 강의
  등을 공부하고, 간단하게 정리한 내용입니다. 잘못된 부분이나 문제되는 점이 있으면 댓글 부탁드립니다.

728x90
반응형
저작자표시 비영리 변경금지

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

[React] 조건부 렌더링  (0) 2023.02.25
[React] state 와 setState() - 클래스형 컴포넌트  (0) 2023.02.25
[React] 이벤트 처리하기  (0) 2023.02.22
[React] 컴포넌트(Component)와 Props  (1) 2023.02.22
[React] JSX 이해하기  (0) 2023.02.22
'Core/React' Related Articles more