[REACT] REACT 란

REACT

• 리액트는 자바스크립트 라이브러리이다.
  
• 구조가 MVC, MVVM과 같은 다른 프레임워크등과는 다르게 오직 View만 처리하는 라이브러리이다.

---

SPA란

• Single Page Application의 줄임말
• index.html하나만 로드하고 실행시키는 구조이다.

어떻게?

번들러(Webpack)가 이 모든것을 해결한다.

Webpack이란 어플리케이션을 동작시키는데 필요한 자원(JS파일들, CSS, Image 등)을 하나로 묶어서 조합하여 경량화 하여 결과물을 만들어 주는 도구이다.

번들러는 node.JS를 통해 직접 설정 할 수 있지만, 리액트 프로젝트를 생성시 자동으로 포함된다.

---

DOM ( Document Object Model )

• HTML을 이해하기 쉽도록 트리 구조로 만들어진 태그(객체)들이다.

리액트의 Virtual DOM

• HTML에서 DOM을 조작하여 처리할 때, DOM핸들링 자체는 빠르다.
• 하지만, 웹 브라우저가 DOM의 변화를 감지하고, CSS를 적용하고, 처리하는 과정에서 시간이 많이 소요된다.
• 리액트의 Virtual DOM은, 이를 추상화시킨 자바스크립트 객체를 이용해서,바뀐 부분만 부분적으로 리렌더링하여 사용 하는 방법입니다.

쉽게 말하면, 변경페이지와 기존페이지를 비교해서
변한것이 없다면 그대로 놔두고
변한것이 있으면 변한것만 부분적으로 바꿔주는 형식이라고 생각하면 된다.

---

REACT 기초 환경 설정

1. node.js 설치
2. vscode 설치
3. vscode 터미널에 "명령어" 입력

npm create react-app react-basic

입력 후 "Y" 입력

 

위 "명령어" 설치 완료시

위 사진과 같이 목록에 여러 가지 파일들이 나열된다.
그리고 VS CODE 터미널에 아래와 같이 입력해준다.

npm create react-app 프로젝트명(react-basic) // 프로젝트 생성
cd react-basic // react-basic 이라는 폴더로 접속
npm start  // npm을 실행

소스 코드 작성 후 실행 방법

npm start
npm build
npm test
npm eject

---

참고
git에서 clone받았을 때 트러블슈팅(문제해결)

node_modules에는 node.js의 전체모듈이 들어있기 때문에 유의해야한다.
노드모듈은 git에 올리는 것이 아니다.

git에서 프로젝트를 받았을 때 node_module이 없다면 아래명령을 사용하면 된다.
>> npm install