드디어 React

React란?

Facebook에서 개발한 오픈 소스 프론트엔드 라이브러리이다. 웹 및 모바일 에플리케이션의 사용자 인터페이스를 구축하는데 사용된다.

예를 들어, React는 레고블럭과 같다. 작은 블록(컴포넌트)들을 조합하여 복잡한 구조물(애플리케이션)을 만든다. 

 

주로 React는 SPA를 만드는데 사용됨으로 현대 웹개발에서 매우 인기 있는 도구이다. 동적이고 반응적인 사용자 인터페이스를 만드는데 특히 유용해서 많은 기업들이 사용중이다!

 

 

주요 특징

- 컴포넌트 기반: UI를 재사용 가능한 작은 조각(컴포넌트)으로 나눈다.

- 가상 DOM: 실제 DOM 변경을 최소화 하여 성능을 개선한다.

- 단방향 데이터 흐름: 데이터의 흐름을 예측 가능하게 만든다.

 

사용 이유

- 효율적인 UI 업데이트: 변경된 부분만 업데이트하여 성능이 좋다.

- 재사용성: 한 번 만든 컴포넌트를 여러곳에 사용할 수 있다.

- 큰 커뮤니티: 많은 개발자들이 사용하여 지원과 리소스가 풍부하다.

 

학습 곡선

- 기본 개념은 비교적 쉽게 배울 수 있다.

- 고급 기능과 패턴을 마스터 하는데는 시간이 걸릴 수 있다.

 

 

 

 

SPA란?

Single Page Application으로 한개의 페이지로 이루어진 애플리케이션이라는 뜻이다. 페이지 전체를 다시 로드하지 않고 동적으로 콘텐츠를 갱신한다. 예를 들어, SPA는 마법책과 같다. 책은 하나(단일 페이지)지만, 페이지를 넘기는 대신 내용이 자동으로 바뀌어 다양한 정보를 보여준다. 

 

 

런타임이란?

프로그래밍 언어가 구동(runnning)되는 환경을 말한다.자바스크립트의 대표적 예로는 브라우저(ex. Chrome, Microsoft Edge, Firefox ...)와 node환경이 있다. 즉 자바스크립트 파일을 실행할 수 있는 방법이 2가지가 있다는 뜻이다.

 

 

 

 

 

 

 

React 프로젝트 생성 방법

- CRA(Create React App)

- Vite (강력히 추천!!!!)

- A~Z 혼자하기(비추천)

 

 

 

 

(1) CRA (= 완제품을 구매한다.)

한 줄의 명령어 입력으로 React 프로젝트 개발에 필수요소를 자동으로 구성하는 방법이다.

 

yarn create react-app [원하는 프로젝트 이름]

명령어를 입력 후, 성공 메세지를 확인한다.

cd [생성 프로젝트 이름]
yarn start

그 다음 프로젝트 위치로 들어가주고 터미널에서 yarn을 start 해주면 된다.

이런 화면이 뜬다면 성공이다!

 

 

 

(2) Vite

CRA와 같이 리액트 프로젝트를 풀세팅 해주는 빌드 도구이다. CRA와 비교도 안될 정도로 속도가 빠르다.

 

yarn create vite [원하는 프로젝트 이름]

명령어를 입력 후, 다음 명령어를 통해 프로젝트에 접근 및 실행한다.

cd [생성 프로젝트 이름]
yarn
yarn dev

5173번 포트를 통해 실행 되었다.

local URL 링크로 들어가면 실행된 화면이 보인다!