230113 React 개념과 설치

리액트 시작하기
-프론트앤드인데, 백앤드랑 섞여서 많이 사용됨.
+)리액트는 처음 페이스북에서 만들어졌다.

배워야하는 이유
1.차별화
2.전자정부프레임워크(우리나라 표준. 나라 관련 사업은 전부 이것 사용. 사용하면 세금감면.)-eGovFrame : spring으로 만들어져있음.
->v4.1 베타 버전이 22년 12월부터 업그레이되었는데 최신 Spring, SpringBoot지원 시작, React js의 뷰 탬플릿 탑재
-->즉, 사장되지 않을 것! 
3.react JS에서 파생->react Native. : 모바일
react와 비슷한 vue JS, Angular JS. 셋이 비슷하고 문법만 살짝씩 다름. 

 

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

SPA란?
- Single Page Application의 줄임말.
- index.html하나만 로드하고 실행시키는 구조.

어떻게?
번들러(Webpack)가 이 모든것을 해준다!
-Webpack이란 어플리케이션을 동작시키는데 필요한 자원(JS파일들, CSS, Image 등)을 
하나로 묶어서 조합하여 경량화 하여 결과물을 만들어 주는 도구.

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


Webpack은 여러가지가 있다.

---

리액트의 Virtual DOM
HTML에서 DOM을 조작하여 처리할 때, DOM핸들링 자체는 빠름
but 웹 브라우저가 DOM의 변화를 감지하고, CSS를 적용하고, 처리하는 과정에서 시간이 많이 소요됨.

=>리액트의 Virtual DOM은 이를 추상화시킨 자바스크립트 객체를 이용하여,
바뀐 부분만 부분적으로 리렌더링 하여 사용하는 방법.

---

리액트 환경설정하기

1 node.js 다운, 설치. 
2 에디터 vscode 설치 
3 터미널에서 create-react-app으로 프로젝트 생성하기
npm create react-app 프로젝트명.

    +)node js가 깔리면 터미널에서 npm으로 명령어 넣어서 가능.
프로젝트명 : react-basic으로.

실제 프로젝트는 react-basic에서. 3까지의 과정 이후 react-basic 폴더 열기를 해야 함.
4.프로젝트 시동하기
npm start

ctrl c를 하면 서버를 끔

깃과 연동할려면 이 위치에서 해야 하며, clone을 하면 node_modules가 없다. 따로 설치해야 함.
생성하는 커멘드도 있다.
외에도 clone을 할 시 해줘야 하는 게 있다. 구글링.

 

---

설치 후 생성파일들

node modules

public
->화면의 최 상단에 그려지는, 공용으로 사용할 모든 것. 사용하지 않을거면 index.html과 manifest.json빼고 다 지워도 됨
src

index.js
root라는 아이디로 가져와서 render라는 함수로 그림
<App /> ->컴포넌트. 하나의 구성으로 화면을 그림

App.js
여기서 만든 것들을 <App />를 통해 export해주는 것.

App()함수의 return 안에 있는게 JSX문법이다.
return을 통해 index.js의 root로.
즉, 화면을 바꾸는 걸  JSX에서 하는 것