[React] React 의 특징, JSX 이해하기

📗 React

[React] React 의 특징, JSX 이해하기

Tamii 2021. 4. 11. 17:32

CSR 클라이언트 사이드 렌더링

data(json)가져와 클라이언트에서 렌더링 하여 결과 보여줌

json데이터만 받아와서 클라이언트 렌더링 하여라

SSR 서버 사이드렌더링

누르면 페이지 새로고침 ( 페이지 이동)

html 파일을 가져와서 서버에서 새로 렌더링

📌 SPA ( Single Page Application )

한 single page에서 데이터 변화가 다 이루어지도록 만든 페이지

새로고침 없이 빠르게 대응하도록 만듦

백엔드 API 제공 -> 클라이언트 template 작업 -> 렌더링

클라이언트에서 data들을 파싱하면서 JS가 복잡해졌다.

많은 모듈들을 어떻게 객체지향형으로 만들까?

그 중에 비동기 이벤트 처리도 완료해야 함

SPA를 위해 필요한 기술

라우팅

클라이언트 사이드 렌더링

상태관리

view-model 바인딩

component 단위 개발

SPA 프레임워크

Angular, React, Vue.js ...

📌 MVC ( Modle View Controller ) 패턴

Action -> Controller -> Model -> View

View 에 Model선언

Model 변경 -> Viwe 렌더링 알아서

DOM 에 access 쓸필요 없음 ( DOM 직접 접근 필요가 없음)

📌 Flux 패턴

한 쪽 방향으로 흐르는 페이지 구조

데이터의 구조 : top-down

데이터 변경 ---> 렌더링

잦은 렌더링의 단점이 있음

📌 React

UI를 만드는 JS 라이브러리 (함수의 집합 )

component의 모임으로 이루어짐

변경사항을 탐지하여 View 렌더링 최소화

데이터를 선언해두면 데이터 변경시 자동 렌더링

virtual DOM을 만들어 변경사항을 계속 비교

Browser DOM 에서는 DOM 변경 최소화 하여 반영

기존의 프레임워크	React
특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결	특정 값이바뀌면 새로 만들어서 보여줌

업데이트를 어떻게 해야할 지 고민하지 않아도 됨

하지만 모든걸 날리고 새로 보여주면 너무 느리니 해결하기 위해 나온 녀석이 virtual DOM

⚠️ Virtual DOM 이란?

데이터 변경을 비교하기 위한 가상 DOM

DOM 변경을 최소화하여 렌더링 할 수 있게 함

단순 JS 객체이기 때문에 실제 브라우저의 DOM 보여주는 것보다 속도가 훨씬 빠름

❖ 동작 방식

1) 데이터 업데이트 --> 전체 UI 를 virtual DOM 에 리렌더링

2) 이전 virtual DOM과 현재 virtual DOM 비교 (diff)

3) 바뀐 부분만 real DOM 에 적용

React는 virtual DOM을 통해 렌더링을 한번으로 줄여 효율적으로 HTML을 제어하게 됨

데이터의 흐름과 구성을 일관되게 만들어줌

코드로 알아보기

react = component 개발방식

결국 Single page에는 HTML 코드가 없음 -> 모든 HTML 코드는 JS에 있음

< html >

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="theme-color" content="#000000">
	<title>React App</title>
</head>

<body>
	<div id="root"></div>
</body>

</html>

< index.js >

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);

index.js가 entry point 로 설정되고 다른 많은 component들을 불러와서 사용

ReactDOM>render : 실제 DOM 내부에 리액트 컴포넌트를 렌더링

ex) 위 예시 : id가 "root"인 DOM을 선택하여 렌더링하겠다.

📌 JSX

참고 : (2021.03.16 - [📘 React] - [ React ] JSX 이해하기 & Proptypes

* React에서 사용하는 표준 html 문법 (실제로는 JavaScript)

* DOM API를 직접 사용하지 않고도 DOM을 변경할 수 잇게 함

* babel을 통해 transpiling 을 해야 함

 render() {
    return (
      <div>안녕하세요</div>
    )
  }

☻ JSX 규칙

1. 태그는 꼭 닫혀있어야함

<div></div>

단 태그 사이에 내용이 들어가지 않을 때는 Self Closing 태그 가능

<Hello />

2. 2개 이상의 태그는 무조건 하나의 태그로 감싸야 함

//오류
return (
    <Hello />
    <div>안녕</div>
);

//OK
 return (
 	<div>
    	<Hellog />
    	<div>안녕</div>
    </div>
);

복잡할 경우 Fragment 사용 가능

브라우저 상에서 별도의 element로 나타나지 않음

 return (
 	<>
	<Hellog />
	<div>안녕</div>
	</>
);

3. JSX 안에 JS 값 사용 시 {}

 return (
 	<>
	<Hellog />
	<div>{name}</div>
	</>
);

4. class 설정 시 className (o) class(x)

 return (
    <>
      <Hello />
      <div>{name}</div>
      <div className="boxTitle"></div>
    </>
  );

5. 주석은 {/* */}

 return (
    <>
      {/* 주석입니다 */}
      <Hello />
      <div>{name}</div>
      <div className="boxTitle"></div>
    </>
  );

6. 사용자 지정 component 사용

render() {
    return (
      <div>
      <div>안녕하세요</div>
      <MyList  info="firstPost"></MyList>
      </div>
    )
  }

<MyList > : 실제 존재하는 HTML tag (x) 사용자 Component (o)

new MyList({info: "firstPost"});

JS로 하면 위와 같다고 할 수 있음