React ?
VirtualDom
: 리액트가 관리하는 가상 DOM. (브라우저의 DOM과 별도)
- 페이지 내 내용이 변경되면 VirtualDom 은 차이가 있는 부분을 확인한다.
- 자체적으로 변경된 부분만 찾아서 Reflow(재렌더링) 한다.
JSX (JavaScript+XML)
: 자바스크립트를 확장한 프로그래밍 언어.
장점?
1) Component 를 사용하여 속도가 빠르다.
2) react-dom 이라는 가상돔에서 만든다.
단점?
1) 단방향, 데이터를 바꿀 때 전체(최상위)를 바꿔야 함. -개선된것 Redux
2) function 기반은 전역변수 사용이 어렵다. -개선 Hooks (속성으로 넘기기힘듦 - UserState: state를 자유자재로 쓸수있음)
설치
리액트를 사용하기위해 아래 순서대로 설치를 진행해준다.
1. Node.js 설치
2. React 설치
C:\Users\sist27>npm install -g create-react-app3. WebStorm 설치 (편집기)
React 프로젝트 생성/실행 with WebStorm
-
New Project 생성 후 (왼쪽 사이드바에 React App 선택)
-
App.js 에서 약간의 수정이후 터미널에서
npm start를 실행한다.
-
package.json 의 dependencies 에 axios 버전을 추가해준다.
"axios": "^0.19.2"
Component 기본 형식 [class 기반, function 기반]
class 기반 : 생명주기가 있음
class App extends Component
{
constructor(){}
// 화면에 불러오기 전 (데이터 받기전)
componentWillMount()
// 화면 출력을 읽는 데이터 (데이터 받음)
render(){}
// 화면을 출력 (onLoad() 와 비슷)
componentDidMount()
//javaScript onLoad() 방식은 아래와 같음.
componentDidMount() => $(function(){})
$(document).ready(function(){})
window.onload=function(){}
}function : 생명주기가 없음 -> Data를 넘겨주는 방식 -> 그런데 어려움 -> Hooks 사용
function App()
{
return{
<html>
</html>
)
}JSX 형식
- 반드시 계층구조를 만든다.
<div>Hello</div>
<div>React</div>
//- Error/* 계층구조로 아래와 같이 */
<div>
<div>Hello</div>
<div>React</div>
</div>- HTML 태그는 반드시 소문자
<Html> => //- Error- 속성은 반드시 ""
<table width="100"><table width=100> //- Error
내맘대로 개발