React
터미널 명령어
cd 폴더이름: 폴더로 이동cd ..: 폴더에서 나올 때dir(윈도우), ls(리눅스): 목록 조회npm install 프로그램 이름npx: 프로그램을 임시로 설치, 딱 한 번 실행시키고 지우는 도구
디스크 공간 차지 안함
매번 다운로드 받아 설치하므로 최신버전 상태 유지mkdir 폴더이름: 폴더 생성create-react-app .: 폴더구조 생성
리액트에서 사용하는 문법
- base : 자바스크립트
- 리액트 사용 : JSX 문법 - 바벨(JSX를 자바스크립트로 변환시켜줌)
구조
리액트 : 컴포넌트
C언어 : 함수
함수형 컴포넌트
클래스형 컴포넌트
흐름
툴체인 설치 (create-react-app)
리액트 프로젝트 생성 (기본 코드 생성)
index.html - index.js - App.js (App컴포넌트) - App.css
~컴포넌트 작성~
배포
npm run build
npm install -g serve
npx serve -s build
빌드 파일 생성 후 서버와 함께 올림
시멘틱 태그
<p> , <b>는 기능적인 태그
html5에서는 <header>, <nav>와 같은 의미론적인 태그를 사용할 수 있도록 허용됨.
개발자가 이 태그를 보고 어떤 기능인지 알아볼 수 있는 태그
React 동작 원리
렌더링
- 사용자 화면에 뷰를 보여주는 것을 렌더링이라고 한다.
- 리액트 라이브러리는 데이터가 변할 때마다 리렌더링을 효율적으로 어떻게 하는가?
- 리액트 컴포넌트의 '초기 렌더링'과 '리렌더링' 개념을 이해해야 한다.
초기 렌더링
- Render() {...} 함수가 있다.
- Render() 함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링한다.
- 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고, 우리가 정하는 실제 페이지의 DOM 요소 안에 주입한다.
조화 과정
-
리액트에서 뷰 업데이트 시 '조화과정을 거친다'라고 하는 것이 더 정확한 표현이다.
-
컴포넌트에서 데이터에 변화가 있을 때 뷰가 변경되는 것처럼 보이지만 사실은 새로운 요소로 갈아끼우는 것이다.
-
이 작업 또한 render 함수가 맡아서 한다.
-
Render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고, 이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교한다.
-
두 가지 뷰를 최소한의 연산으로 비교한 후 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트 한다.
Virtual Dom
- 리액트는 virtual DOM을 사용한다.
- DOM이란 Document Object Model의 약어이다.
- 객체로 문서구조를 표현하는 방법으로 XML이나 HTML로 작성한다.
- 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용한다.
- DOM은 트리 형태라서 특정 노드를 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다.
- DOM에는 치명적인 한 가지 문제점이 있다. 바로 동적 UI에 최적화가 안되어 있다는 점이다.
- HTML은 정적이다. 그래서 자바스크립트를 통해 동적으로 만들 수 있다.
요즘의 큰 규모의 웹 애플리케이션인 트위터나 페이스북을 생각해보자.
대규모의 웹 애플리케이션이 DOM에 직접 접근하여 변화를 주다 보면 성능 이슈가 발생한다.
-
이슈 해결법
- HTML 마크업을 시각적인 형태로 변환하는 것은 웹브라우저의 역할이기 때문에 처리 시 컴퓨터 자원을 사용하는 것은 어쩔 수 없다.
- DOM 조작 시 업데이트가 잦으면 성능이 저하될 수 있다.
- DOM을 최소한의 조작으로 작업 처리하는 방식으로 개선할 수 있다.
- 리액트는 virtual DOM 방식을 사용하여 DOM을 추상화 함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행한다.
-
리액트 매뉴얼 : 지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기(용도에 맞게 사용하자)
JSX ⇒ 바벨 ⇒ 자바스크립트
// JSX
function App() {
return (
<div className="App">
{/* <MySubject/>
<MyTopic/>
<MyContent/> */}
Hello <b>react</b>
</div>
);
}↓ JSX를 바벨이 자바스크립트로 변환
// 자바스크립트
function App(){
return React.createElement("div", null, "Hello",
React.createElement("b", null, "react"));
}var, let, const
C언어에서의 지역변수는 중괄호를 기준으로 생성되지만, 자바스크립트의 var 타입은 함수기준으로 생성된다.
function myTest()
{
if(true)
{
var val = 100;
alert(val);
}
alert(val)
var val = "TEST";
alert(val);
}
myTest();따라서 이런 코드가 있을 때 C언어에서는 오류가 나지만, 자바스크립트에서는 작동하는 코드가 된다.
function myTest()
{
if(true)
{
let val = 100;
alert(val);
}
alert(val);
}
myTest();하지만 let타입을 사용하면 기존의 지역변수와 같은 방식으로 작동한다.
var 타입보다는 let 타입의 사용을 권장한다.
- var : 함수 범위 기준
- let : 중괄호 범위 기준, 값 변경 가능
- const : 중괄호 범위 기준, 값 변경 불가
템플릿 문자열
const name = "마이클";
const age = 25;
const height = 180.5;
console.log(`My Name is ${name}
My age is ${age} ,
My height is ${height}`)템플릿 문자열을 사용하면 개행한 그대로 출력된다.
JSX
인라인 스타일링
- 리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣은 것이 아니라 객체 형태로 넣어주어야 한다.
- 스타일 이름 중에서 background-color 처럼
-문자가 포함되는 이름이 있는데 이러한 이름은-문자를 없애고 카멜표기법으로 작성하여 backgroundColor로 작성.
function App() {
const name = "리액트";
const style = {
backgroundColor : 'black',
color : 'aqua',
fontSize : '48px',
fontWeight : 'bold',
padding: 16
}
return (
<div style={style}>
{name}
</div>
);Class 대신 className
- JSX에서는 class가 아닌 className으로 설정
- App.css를 열어서 내부 내용을 모두 지운 후 새로운 CSS 클래스를 작성
App.js
function App() {
const name = "리액트";
return (
<div className="test">{name}</div>
);
}App.css
.test {
background-color: aqua;
color: black;
font-size: 48px;
font-weight: bold;
padding: 16px;
}꼭 닫아야 하는 태그
-
HTML에서는 꼭 닫지 않아도 되는 태그가 있다.
ex)<br>,<p>...
-
JSX에서는 태그를 닫지 않으면 오류가 발생한다.
