-
#React JS -1 React?????React 2021. 6. 7. 21:31
React는 프레임워크가 아닌 라이브러리
frame : 틀
1. 필요한기능이 대부분 만들어져있음 ,
BUT
1. 틀에서 벗어나기가 힘들다.
2. 다른 프레임워크나 라이브러리와 사용시 충돌할 가능성이 있음.
3. 필요없는 기능도 포함되어 상황에따라 무거울 수가 있다
라이브러리(React)
1. 필요한 부분에 가져다 쓰면된다.
다른 라이브러리와 충돌할 일이 없다.
React
- user interface를 만들기위한 라이브러리
- controller , router, ajax를 내장하지 않아 가볍다.
Vitual Dom을 사용한다.
JQuery, Javascript
- 실제 DOM을 직접처리하면 성능도 느리고 비효율적이며 처리할 데이터가 많으면 관리하기가 힘들다.
Vitual Dom은 이를 추상화 시킨것으로 javascript 객체에 불과하며, 이 안에서 처리하는것은 이미 렌더링된 데이터를 실제 DOM API를 통해 처리하는 것보다 빠르다.
React JS의 장점?
1. Virtual Dom
2. 배우기 쉽다.
3. 잘못사용하지만 않으면 뛰어난 Garbage Collection , 메모리 관리, 성능
4. 서버 & 클라이언트 렌더링 지원
(
javascript는 client 렌더링 위주, 자바스크립트 처리가 끝나면 우리가 원하는 ui가나타남 즉
-> 초기 구동 딜레이가 생김
서버 렌더링을 하면 서버측에서 html을 미리 생성하고 문자열형태로 브라우저에 띄워주고 client 렌터링이 시작됨.
)
5. 검색엔진 최적화
-> Client 렌더링을 하게되면 검색엔진 봇이 사이트를 수집할때 실제적으로 얻는 정보는 사이트 데이터가 아닌 비어있는 요소가된다.
6. 매우 간편한 ui 수정 및 재사용
React JS의 단점?
1. view only
2. IE8 이하 지원 X (사용하려면 REACT V-14이하를 사용해야함)
vanilla js vs React
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> </head> <body> <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js" ></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" ></script> <div id="root"></div> <!-- dom - 논리적 모델 VANILLA JS -> 순수 JS --> <script> const rootElement = document.getElementById("root"); //const element = document.createElement("h1"); //React는 ELEMENT 생성시 사용 const element = React.createElement("h1",null, "Hello, world" ); //const elementv.textContent = "hello, world"; console.log("element", element); //appendChild와 같은 역할을 한다 ReactDOM.render(element, rootElement); // rootElement.appendChild(element); </script> </body> </html>'React' 카테고리의 다른 글
#React JS-4 React LifeCycle (0) 2021.06.10 #React JS-3 props (0) 2021.06.08 #React JS-2 JSX??? (0) 2021.06.07