React 소개와 설치

React : 한마디로 UI 라이브러리 이다.

 

프레임워크?

개발자가 기능구현에만 집중할수 있도록 코드만 작성하면 알아서 다 굴러가게 해줌

ex 

Spring Framework

Vue / Angular

Django, Flask

라이브러리?

공통 기능의 모듈화가 이루어진 프로그램의 집합

React

react-router-dom

redux

 

제어의 역전

원래는 개발자가 개발할떄 제어를 한다.

그런데 프레임워크를 사용하는 경우 시키는대로 짜게되니 제어의 흐름이 프레임워크로 가게 되는것이다.(제어가 역전됨)

 

리액트는 왜 라이브러일까?

리액트 자체만으로 프레임워크라고 불리기에는 제공해야하는 기능이 부족하다.

상태관리, 라우팅처리, 스타일링 등 개발자가 처리 해주어야 한다.

프레임워크 / 라이브러리 차이는 너무많이 다루었기때문에 이쯤하고 넘어가자..

 

리액트 특징

1.SPA

Single Page Application : 한개의 페이지로 이루어진 애플리케이션이다.

하나의 html로 이루어진 애플리케이션이다

MPA가 가지는 불편함(깜빡거림, 렌더링 속도) 때문에 등장하게 됨.

MPA : Multi Page Application : 멀티페이지로 구성됨

 

2.인기가 많다

 

3. UI가 필요한 곳 어디에서도 사용할수있다.

웹 뿐만아니라 React Native를 활용한 모바일 애플리케이션, VR에서까지 활용 가능하다

 

리액트 프로젝트 생성

그렇다면 이제 본격적으로 리액트 프로젝트를 생성 해보자.

일단 리액트 프로젝트 생성 방법에는 2가지 방법이 있다.

 

1.CRA (create-react-app)

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

 

터미널에서 명령어 한줄만 쳐주면 react 프로젝트를 실행시킬수 있다!

 

 

2.Vite

vite역시 CRA처럼 리액트 프로젝트를 빌드해주는 도구이다.

그런데 프로젝트가 생성되는 시간이 CRA보다 훨훨씬 빠르다!!

 

그리고 CRA는 기본적으로 설정을 캡슐화 하여서 숨겨지는 경우가 있는데 vite는 사용자가 필요에 따라 설정을 더 쉽게 할수 있다는 장점이 있다!

 

어케 설치함?

CRA와 같이 터미널에서 명령어를 입력해주어야하는데,

--template 옵션으로 템플릿을 지정할수 있다. 리액트프로젝트를 생성할거니까 리액트 옵션으로 지정한다.

yarn create vite my-react-app --template react

 

프로젝트 생성 후 명령어를 통해 프로젝트에 접근하기.

cd my-react-app
yarn
yarn dev

 

 

그러면 터미널에 로컬호스트 주소가 뜬다 !