React 설치/셋팅

React는 왜 사용하는 것일까?

1. SPA(Single Page Application)을 만들 때 쓴다. Vue, Svelte, Preact, SolidJS등 React와 비슷한 라이브러리들은 많다. 하지만 React가 가장 오래됬고, 유저가 가장 많기 때문에 입문하기 좋다.

SPA가 뭐에요?
싱글 페이지 애플리케이션은 서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다. 이는 단일 페이지로 구성되어 있다.

2. React를 쓰면 html 재사용이 편리해진다.

위 코드와 같이 html을 함수, arr, obj로 직접 담아서 쓸 수 있다.

3. 같은 문법으로 React Native를 통해 앱개발이 가능하다.

4. FE직무에서 React 개발능력을 필요로 하고 있다..!

프로젝트 생성

터미널오픈 후 npm create vite@latest 명령어를 작성하자.

Vite는 뭐죠?
React, Vue, Svelte등 프로젝트 생성을 도와주는 빌드툴이다. 소스코드 사이즈 압축이 가능하고, 여러 문법들을 자바스크립트로 컴파일해준다. 개발 중 미리보기도 보기쉽게 띄워준다.

그리고 프로젝트 이름, 사용할 프레임워크와 언어를 선택해주자.

잠깐! SWC는 또 뭐죠?
Rust로 짜여진 컴파일러로, 현재는 JavaScript/TypeScript 트랜스파일링을 주로 담당하고 있다. 속도와 성능 개선에 초점을 맞추고 있으며, 기존의 Babel 등의 트랜스파일러를 압도적으로 뛰어넘는 성능을 보여준다.

그렇다면 프로젝트 생성 완료!