React의 등장
HTML/CSS/JS를 아우르는 개념 DOM
DOM은 하나하나 해야함
페이지가 단순할 땐 가능했음. > 최근에는 상호작용이나 데이터도 많고. > DOM으로 관리하는 것에 한계 > JQeury가 나옴.(DOM의 연장선) > 메서드들을 모아놓음(원리가 같다.) >> 한계가 있음
(>> 퍼블리셔가 증가함)
Frontend Framework/Library 등장 (웹페이지를 효율적으로 관리(유지/보수)하기 위해)
그래서 나온 것이
Angular/Vue/React
React의 사용자가 많은 이유는?
- 생태계 활성화(사용자가 많으니 라이브러리 같은 것들이 많음)
- React Native : 앱개발. 라이브러리
Framework / Library
앵귤러와 뷰는 MVC(Model(데이터모델) View Controller) Framework
리액트는 Library
Framework : 틀
틀이 짜져 있는것. 개발자가 그 틀에 들어가서 개발함.
Library : 부분부분 필요한 기능
일부의 기능을 이루고 있는 것.
(프레임 워크에 포함되어 있음)
리액트는 오로지 View만...!!
"지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하는 것이 목표" - facebook
https://ko.wikipedia.org/wiki/%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC_(%EC%BB%B4%ED%93%A8%ED%8C%85)
라이브러리(library)는 주로 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임이다.
https://ko.wikipedia.org/wiki/%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC
소프트웨어 프레임워크는 복잡한 문제를 해결하거나 서술하는 데 사용되는 기본 개념 구조이다.
CRA(Create-React-App)
ReactProject Application : 개발환경 세팅이 필요
-
CRA를 사용해서 프로젝트함(로컬에서)
로컬 서버를 띄움. -
JSX > 컴파일(CRA에서 해줌: default setting) > JS
Node와 npm은 왜 설치하는가?
- Node는 (자바스크립트는 브라우저에서만 동작) 탈웹!
(자바스크립트가 서버(기타환경)에서도 동작함) - 자바스크립트가 웹브라우저 이외의 환경에서도 작동할 수 있게끔 해주는 환경.
리액트는 view만 담당하는 라이브러리, CRA를 사용하려면 node를 설치해야함(기반)
초기 세팅
-
cra 설치
npx create-react-app 프로젝트명
(npx는 하나의 업그레이드 된 기능) -
node-modules-pakage.json-gitignore(3가지를 연결해서 생각하자)
- 노드모듈 : CRA 패키지 소스코드
용량이 너무 큼(다 못 올린다.) - 패키지.json : "dependensies" { 패키지이름 : verision}
이걸 보고, 패키지를 다운받음
- npm install node-sass --save(--를 써야 depen..에 이름이 들어감)
- 화면에 어떻게 리액트 마크가 돌아가는가?
index.html(public) - index.js(src) - App.js()
<div id="root">ReactDOM.render(컴포넌트, 컴포넌트 위치)
컴포넌트란?
-
한마디로, UI 구성 단위.
(nav/main/aside 와 같은)
하나만 작성하면 여러군데에서 재활용할 수 있어서 편리하다. -
컴포넌트는 클래스형과 함수형이 있다.
-
컴포넌트를 분리하는 기준은? 재활용의 유무
import 문
import React, {Component} from 'react'
나중에.. 라우터할때..
DOM처럼 하위에 Login도 있고 Main도 있고..
전부 최상위로 종속되는 거임.
페이지마다 css에 같은 선택자를 공유하고 다른 내용일때 css가 터짐
