React - 1
2020. 4. 2. 21:15ㆍ포트폴리오/React
포트폴리오를 위해 캡스톤 디자인 프로젝트에 사용될 프론트엔드 라이브러리
기존 모델 1 방식에서 MVC 모델 2 패턴으로 처음 만들어질 프로젝트
MVC 모델 2 패턴이란
Model (Java Beans Class)
View (JSP)
Control(Servlet) 으로 로직과 디스플레이를 구분한 형태이다.
React
-페이스북이 만든 Javascript Library 오픈소스 프로젝트(프레임워크 X).
-Front-end 에 사용됨.
-컴포넌트 형식 구현. 재사용이 가능.
Virtual DOM
-Real DOM 대신 Virtual DOM을 이용한 후 최종 단계에 Real DOM에 반영
-과정의 반복을 줄여줌
-SPA(Single Page Application)에서 다수 DOM 조작을 효율적으로 하기 위해 탄생
<html>
<head></head>
<div id="root"></div>
<script type="text/javascript">
setInterval( () => {
const date = new Date()
const hour = date.getHours()
const min = date.getMinutes()
const sec = date.getSeconds()
root.innerHTML = `<h1> ${hour} : ${min} : ${sec} </h1>`
}, 1000)
</script>
</html>
출처: https://kim6394.tistory.com/111?category=681336 [Gyoogle (규글)]
에서
<html>
<head>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
</head>
<div id="root"></div>
<script type="text/babel">
setInterval( () => {
const date = new Date();
const hour = date.getHours()
const min = date.getMinutes()
const sec = date.getSeconds()
const ele = <h1>{hour} : {min} : {sec} </h1>
ReactDOM.render(ele, root) //virtual DOM
}, 1000)
</script>
</html>
출처: https://kim6394.tistory.com/111?category=681336 [Gyoogle (규글)]과 같이 반복적인 갱신이 일어날 경우 사용
'포트폴리오 > React' 카테고리의 다른 글
| useState 배열 수정 (0) | 2021.01.15 |
|---|---|
| setState는 비동기 (0) | 2020.08.25 |
| React - 4 (0) | 2020.04.02 |
| React - 3 (0) | 2020.04.02 |
| React - 2 (0) | 2020.04.02 |