React 설치 & 개발환경 세팅, JSX란?

💡리액트를 왜 쓰는 걸까?

SPA(Single Page Application) 만들 때 쓴다.

SPA(Single Page Application) : 어떤 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것을 의미

리액트의 장점

1. 가장 오래 됐고 사용하는 유저가 가장 많다. (= 커뮤니티 형성이 잘 되어있고 자료가 방대한 만큼 구글링을 통해 원하는 정보를 쉽게 찾을 수 있다.)
2. 리액트를 쓰면 html 재사용이 편리하다.
3. 같은 문법으로 앱 개발이 가능하다. (React Native)

---

개발환경 세팅

1. Node.js 설치

LTS버전(안정적, 신뢰도 높음)과 Current버전(최신 기능)이 있는데 안정적인 LTS버전을 추천한다.

2. VSCode 설치

리액트를 공부하는 단계라면 보통 다 설치되어 있을거라고 생각한다.

(없다면 지금 설치하자.)

프로젝트 생성

1. 작업폴더에서 shift + 우클릭 → PowerShell/터미널 열기
2. 터미널에 npx create-react-app 프로젝트명
   1. 맥북은 sudo npx create-react-app 프로젝트명
3. 에디터에서 File - Open Folder로 프로젝트 폴더 오픈
4. 미리보기 창 띄우려면 터미널 열고 npm start

---

JSX란?

• JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다.
• JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
• 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

JSX 문법

1. class 넣을 땐 className

Javascript 문법과 겹치지 않도록 className으로 쓴다.

2. 변수 넣을 땐 {중괄호}

3. style 넣을 땐 style={ {style : ‘red’} }

font-size와 같이 속성명에 -(대쉬) 기호를 쓸 수 없기 때문에 fontSize로 치환한다. (Camel Case)

4. 하나의 부모 태그로 감싸야 한다.

return ( ) 안에는 병렬로 태그 2개 이상 넣을 수 없다.