React
- facebook이 만든 오픈소스 라이브러리.
- 자바스크립트 라이브러리로써 높은 자유도 갖는다 (코드의 흐름을 직접 통제)
<-> Vue, Angular 프레임워크 - 컴포넌트(독립적으로 존재할 수 있는 UI요소 or 페이지를 이루는 구성요소) 기반
React 특징
1) SPA(Single Page Application)에 특화 되어있다. (새로고침이 필요없음)
2) virtual DOM(스냅샷) 사용.
실제 DOM에 접근해서 조작하는 방식이 아니라 가상의 DOM을 만들어 메모리에 저장하고 변경사항들을 비교해서 최소한의 내용만 반영. DOM 랜더링 횟수를 줄여 훨씬 빠르게 랜더링 되게 한다.
3) 데이터 바인딩이 쉽다 (hooks를 이용)
4) state(변수) 관리
컴포넌트 단위 데이터 관리 및 앱 전체 수준에서 공통 데이터를 상태로 관리 및 랜더링 하기위한 목적.
React 설치
1) Node 홈페이지에서 Node 설치
(React는 옵저버 패턴을 사용해서 데이터를 변경 감지하다가 변경되면 UI가 자동으로 업데이트 된다. 따라서 계속 변경 감지할 수 있게 React를 계속해서 동작시킬 서버가 필요한데 이때 Node.js를 사용)
2) Visual Studio Code에서 terminal 열고
node -v ## Node 버전 확인
npx create-react-app my-app ## npx create-react-app {프로젝트이름}
cd my-app
npm start
3000번 포트로 다음과 같은 화면이 나온다.
React 실행과정
pakage.json 내부는 아래와 같다.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}terminal에서 npm start를 하면 결국 react-scripts start 가 실행되는건데
이는 index.js 파일을 실행시킨다.
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<App />,
document.getElementById('root')
);
reportWebVitals();ReactDOM.render( ) 가 실행되어 랜더링(데이터를 기반으로 그림 그리는것)된다.
이후 JSX문법(자바스크립트 코드에 HTML을 사용할 수 있게 하는 것)인 <App />이 실행되는데 그 안을 살펴보면 함수 App( )이 존재.
또한 document.getElementById('root')는 DOM이 실행되는건데 index.html 파일에서 id='root' 인것을 찾는다. 즉 App.js 내부의 App( )함수에 있는 return값인 <div>안녕하세요</div>가 index.html 내부의 <body> </body> 태그안에서 사용되는 것.
App.js
import logo from './logo.svg';
import './App.css';
function App() {
return <div>안녕하세요</div>;
}
export default App;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>따라서 React에서 화면이 바뀐다는것은 <body> </body> 태그안의 내용이 바뀌는 것이다.
즉 위에서 언급한 React의 특징인 SPA(Single Page Application)에 특화되어 있다.
출처
- 메타코딩 React 강의
