[React] 리액트 빈 프로젝트 만들기

리액트 시작하기

Getting started with React  (node@16, TypeScript)

React는 무엇인지 알아보고 시작하도록 하자.

Javascript 언어를 기반으로 한, 유저 인터페이스를 개발하기 위한 Library
Framework가 아닌 Library 이다. Framework라 함은 정해져있는 틀들을 반드시 구성한 다음, 우리가 필요한 기능을 구현해야하지만, React의 경우는 우리가 필요한 기능만 가져다 쓰면 된다.

VDOM(Virtual Document Object Model, 이하 VDOM) 사용한다.
VDOM은 가상적인 표현을 메모리에 저장하고, 실제 DOM에 동기화하는 프로그래밍의 개념이다.
쉽게 말하면, 복잡한 변화가 있을 때, DOM은 계산하고 리렌더링을 해야한다. 이것 대신, 렌더링을 배제하고, 연산만 한 다음 결과를 실제 DOM에 넘겨준다. 그럼 실제 DOM은 그리기만 하는 것
보면 이해가 쉬워지는 참고 영상: https://www.youtube.com/watch?v=BYbgopx44vo

리액트는 Library이므로, 다른 프레임워크나 라이브러리와 함께 사용할 수 있다.
예를 들어, 리액트와 앵귤러를 동시에 사용할 수 있다.

 

 

빈 프로젝트 실행하기

 

npm 설치 방법 mac 기준 (내 블로그: https://jintelli.tistory.com/35)
npm (ver 10.16 이상이이어야 함, 나는 M1칩 호환에 문제가 있는 것 같아 16.3.0 사용)

$ npx create-react-app hi-react
$ cd hi-react
$ npm start

참고로 npm -g install create-react-app 은 추천하지 않는다.

이유는 아래와 같음

If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app or yarn global remove create-react-app to ensure that npx always uses the latest version.

 

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

 

from: https://github.com/facebook/create-react-app

 

여기까지 잘 했다면, http://localhost:3000 으로 접속하자.
리액트로 페이지가 띄워진 것을 확인할 수 있다.

우: Chrome 화면 / 좌: Terminal 화면

 

만약 타입스크립트로 생성하고 싶다면,

$ npx create-react-app hi-react --template typescript

으로 작성하면 됨

 

끝

 

https://ko.reactjs.org/docs/create-a-new-react-app.html