처음 배우는 React : 설치부터 JSX까지 간단 정리

리액트(JS)란?

• UI를 더 인터랙티브하게 만들기 위한 JavaScript 라이브러리
• 컴포넌트 기반 개발을 가능하게 해줌
• 가상 DOM(Virtual DOM)을 사용하여 성능을 최적화
• 단방향 데이터 흐름(One-way Data Flow)을 가짐

📌 리액트와 바닐라 JS의 차이

바닐라 JS - HTML작성 후 JS로 조작
리액트 JS - JS가 요소를 생성 HTML로 번역
                1. JavaScript가 element(요소)를 생성
                2.React가 이를 HTML로 변환 및 업데이트
                3.React가 업데이트해야 할 부분만 변경하여 성능을 최적화

react-dom이란?

• 라이브러리 혹은 패키지이며,
• 모든 리액트 요소를 HTML 문서의 body에 렌더링할 수 있도록 도와준다.

---

📍create-react-app 도구를 사용하여 리액트 프로젝트 만들기 

create-react-app은 리액트 앱을 손쉽게 시작할 수 있도록 도와주는 도구다.

이 도구를 사용하면 번거로운 설정 없이 한 줄 명령어로 리액트 프로젝트를 바로 만들 수 있다.

CDN 방식으로 직접 HTML에 리액트를 포함하는 방식은 구식이고 번거롭다.

하지만 !!! create-react-app을 사용하면 그런 번거로움 없이 빠르게 리액트 앱을 시작할 수 있다.

 

1. Node.js와 npm 설치

create-react-app은 Node.js와 npm이 필요하다. 

 

2. create-react-app 사용

터미널에서 아래 명령어를 실행하여 리액트 앱을 생성한다.

npx create-reate-app <폴더 이름>

 

3. 프로젝트 폴더로 이동

cd <폴더 이름>

---

리액트JS 설치(CDN 방식-HTML에서 직접사용) 비추 ! 완전 구닥다리

리액트를 HTML에서 직접 사용하려면 두 개의 JavaScript 파일을 불러와야 한다.

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

---

리액트 요소(element) 생성

 JSX 없이 요소 생성 (React.createElement 사용)

const element = React.createElement("h1", {}, "Hello, React!");
//(태그,속성,내용)

 

위 방식은 코드가 너무 복잡하고 대부분 사용하지 않고, JSX를 통해 리액트 요소를 쉽게 생성할 수 있다.

jsx로 요소 생성

const element = <h1>Hello, React!</h1>;

---

💡 JSX

• JavaScript를 확장한 문법
• HTML과 비슷한 형태
• Babel을 이용해 JavaScript 코드로 변환됨(브라우저가 JSX를 이해하지 못하기 때문)

JSX 특징
- 여러 개의 요소를 반환할 때 반드시 하나의 부모 요소로 감싸야 함
- { }를 사용해서 자바스크립트 표현식 사용 가능
- class 대신 className 사용