[React] 리액트 기초 개념 정리 (DOM, JSX, Element)

 

React

사용자 인터페이스를 만들기위한 javascript 라이브러리

대표적인 자바스크립트 UI 라이브러리 예 - AngularJS, React, View

 

SPA (Single Page Application)
서버에서 필요한 데이터만 비동기로 받아와서 동적으로 현재 화면에 다시 렌더링 하는 방식을 의미합니다. 사용자가 애플리케이션과 상호작용할 때마다 서버에 요청하여 전체 HTML 화면을 받아오는 방식이 아니라, 화면 렌더링을 로컬 PC에서 즉시 생성하므로 더 빠르게 화면 전환을 처리할 수 있어서 널리 사용되고 있습니다.SPA가 ‘단일 페이지 애플리케이션’이라고 일컬어지지만, 하나의 페이지만 존재하는 애플리케이션을 의미하지는 않습니다. SPA도 여러 페이지가 존재하는데요. 다수의 페이지를 표시하는 데 있어서 과거 전통적인 방식으로 페이지 전환을 수행하지 않고, 마치 하나의 페이지인 것처럼 처리하는 기술을 의미합니다. 

 

Virtual DOM

리액트가 수많은 개발자들 사이에서 엄청난 사랑을 받는 이유중 한가지는 바로 빠른 속도입니다.

리액트는 가상돔(Virtual DOM)을 사용해 보다 효율적으로 우리가 원하는 페이지를 브라우저에 빠르게 그려주기 때문인데요.

리액트 개발자라면 한번 쯤 가상돔에 대해 들어봤을 법합니다.

이번 시간에는 가상돔에 대해 이해해보도록 하시죠!

 

DOM (Document Object Model)
https://rebornbb.tistory.com/entry/JavaScript22-05-27-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EB%B3%B8%EB%AC%B8%EB%B2%95-%E2%98%91

 

Virtual DOM

Virtual DOM은 실제 DOM의 가벼운 복사본으로, 메모리에 저장된 자바스크립트 객체입니다. 실제 DOM과 동일한 구조를 가지지만, 브라우저에 직접 접근하여 조작할 수 없다는 특징이 있습니다.

왜 Virtual DOM을 사용할까요?

• 성능 향상:
  • Diffing: Virtual DOM과 새로 생성된 Virtual DOM을 비교하여 실제로 변경된 부분만 찾아냅니다.
  • Batch Update: 변경된 부분을 한 번에 실제 DOM에 반영하여 불필요한 DOM 조작을 줄입니다.
  • 브라우저 렌더링 최소화: 변경된 부분만 업데이트하여 브라우저가 전체 페이지를 다시 렌더링하는 비용을 줄입니다.

React에서 Virtual DOM 활용

• Re-rendering: 상태(state)가 변경될 때마다 새로운 Virtual DOM을 생성합니다.
• Diffing: 이전 Virtual DOM과 새 Virtual DOM을 비교하여 변경된 부분을 찾습니다.
• Reconciliation: 변경된 부분만 실제 DOM에 반영합니다.

장점

• 성능 향상: 불필요한 DOM 조작을 줄여 웹 애플리케이션의 성능을 향상시킵니다.
• 개발 생산성 향상: 복잡한 DOM 조작을 추상화하여 개발자가 UI 로직에 집중할 수 있도록 합니다.

---

컴포넌트기반의 구조

컴포넌트 = 구성요소

리액트에서는 모든 페이지가 컴포넌트로 구성되어있다. 하나의 컴포넌트는 다른 여러개의 컴포넌트로 이루어져 있을 수 있다.

그로인해 리액트를 사용하면 마치 레고블록을 조립하듯이 개발하게된다.

이에 대한 장점으로는 재사용성과 메타라는 IT기업의 든든한 지원과 활발한 지식공유와 커뮤니티가 형성되어있다는 점이다.

재사용성 - 객체지향프로그래밍 배울 등장하는 개념으로 소프트웨어 개발에 있어 매우 중요하다.

재사용성 장점 - 개발기간이 단축됨, 유지보수가 용이함(여러모듈간 의존성이 낮다는 것을 의미하므로)

리액트네이티브라는 프레임워크로 모바일앱개발도 가능하다. 안드로이드는 코틀린 ios는 스위프트를 배워야함

리액트의 단점

방대한 학습량 - 기존과 다른 UI라이브러리 라서 배워야할것이많다.계속 버전 업데이트가 되고있어서 ...

높은 상태관리 복잡도 (state를 잘관리하는 것이 중요한데 처음엔 쉽지않다. 큰규모의 프로젝트에는 외부상태라이브러리사용)

상태관리의 기본개념을 제대로 이해해야한다.

---

JSX (A syntax extension to JavaScript)

JavaScript + XML / HTML 

JSX코드 

const element = <h1>Hello, world!</h1>;

JSX코드를 Javascript코드로 변환하는역할 하는 것이 리액트의 createElement 라는 함수이다.

좌 : JXS 문법 / 우: JXS를 사용하지않은 순수자바스크립트

 

createElement 함수의 파라미터

React.createElement(
	type,
    	[props],
    	[... children]
)

 

리액트에서 JSX를 쓰는것은 필수는 아니지만 사용하면 장점이많기에 편리하다.

JSX의 장점 - 간결한코드, 가독성 향상, 버그를 발견하기 쉬움

 

Injection Attacks 방어 - 보안성 올라감. (입력창에 일반적인 값이아닌 다른 값을 입력해 해킹)

title이라는 변수에 잠재적으로 보안위험가능성이있는 코드가 삽입되어있다.

기본적으로 React DOM은 랜더링하기 전에 임베딩된 값을 모두 문자열로 변환한다.

그렇기에 명시적으로 선언되지않은 값은 괄호사이에 들어갈수없다. 결과적으로 XSS라 불리는 크로스사이트 스크립팅어택을 방어할수있다.

---

JSX사용법

JSX는 {}JavaScript를 사용하여 중괄호를 삽입할 수 있습니다.

const name = "Alice"; 
const element = <h1>Hello, {name}!</h1>;

• 중괄호 안에는 호출 호출, 삼항 반대 등 JavaScript를 호출할 수 있습니다.

JSX는 HTML과 매우 관련이 있지만 일부 속성은 JavaScript의 예약과 충돌하거나 React에서 일부 처리됩니다.

• class→className
• for→htmlFor

const element = <label htmlFor="username" className="label">Username:</label>;

 

조건부

const isLoggedIn = true;
const element = <h1>{isLoggedIn ? "Welcome back!" : "Please sign up."}</h1>;

 

JSX는 배열을 보낼 수 있습니다. 보통을 준비할 때 사용하세요.

 

const items = ["Apple", "Banana", "Cherry"];
const list = <ul>{items.map((item, index) => <li key={index}>{item}</li>)}</ul>;

React에서 인라인 방식이 전달됩니다.

 

const style = { color: 'blue', fontSize: '20px' }; 
const element = <h1 style={style}>Styled Text</h1>;

 

기존 CSS 파일을 작성하고 className적용합니다.

const element = <h1 className="header">CSS Styled Text</h1>;

 

JSX는 하나의 부모 요소로 감싸야 합니다. 요소를 추가하지 않으려면 React Fragment를 사용하세요.

 

import React from 'react'; 
const element = ( <> <h1>Hello</h1> <p>This is a JSX example.</p> </> );

 

React 구성요소는 JSX를 반환합니다.

 

function Greeting(props) {
	return <h1>Hello, {props.name}!</h1>; 
} 
// 사용 예: <Greeting name="Alice" />

 

---

JSX 맛보기

import React from "react";

function Book(props){
    return(
        <div>
            <h1>{`이책의 이름은 ${props.name}입니다.`}</h1>
            <h1>{`이책은 총 ${props.page}페이지 입니다.`}</h1>
        </div>
    );
}

export default Book;

import React from "react";
import Book from "./book";

function Library(props){
    return(
        <div>
            <Book name="하하" page={300} />
            <Book name="호호" page={200} />
            <Book name="허허" page={100} />
        </div>
    );
}

export default Library;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Library from './class01/Library';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Library />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

---

Rendering Elements

Element = 리액트앱을 구성하는 가장 작은 블록들

기존에 앨리먼트라고하면 돔 앨리먼트를 말했다. 

그러면 둘이 어떤면에서 다를까? 

리액트가 개발되기 시작한 아주 초창기에 화면에 나타나는 내용을 기술하는 자바스크립트 객체 일컫는 용어가 필요했다

그래서 처음에는 기술하다라는 의미를 가진 영단어 describe에서 파생된 Descriptor 라는 이름으로 불렸으나

최종적으로 나타나는 형태는 DOM Element였기 때문에 DOM과의 통일성을 위해서 앨리먼트라고 부르게 되었습니다.

이그림은 리액트앨리먼트와 돔앨리먼트를 나타낸것입니다. 앞서 Virtual DOM을 배웠습니다. 실제 브라우저의 DOM에 존재하는 앨리먼트는 DOM앨리먼트가 되는것이고 React의 Virtual DOM에 존재하는 앨리먼트가 리택트 앨리먼트입니다.

결국 리액트 앨리먼트는  DOM앨리먼트의 가상표현이라고 볼수있습니다.

그리고 DOM앨리먼트는 React 앨리먼트에 비해서 많은 정보를 담고있기때문에 상대적으로 크고 무겁습니다.

Element는 화면에서 보이는것들을 기술합니다.

const element = <h1>Hello, world!</h1>;

이코드가 실행될때 대입연산자의 오른쪽 부분은 React의 createElement 함수를 사용하여 리액트 앨리먼트를 생성하게됩니다.

실제 Elments의 생김새 

리액트 Element는 자바스크립트 객체형태로 존재한다.

왼쪽의 앨리먼트가 실제로 랜더링된다면 우측과 같은 DOM앨리먼트가 된다 

그렇다면 앨리먼트의 타입의 html태그이름이 문자열로 들어가는것이 아닌경우에는 어떻게될까? 아래를 보자

객체를 만드는 역할을 하는 리액트의 createElement함수를 보면

type - 여기에는 html태그이름이 문자열로 들어가거나 또다른 react컴포넌트가 들어가게 됩니다.

props - 앨리먼트의 속성

children - 해당 앨리먼트의 자식 앨리먼트들이 이부분에 들어가게된다

 

 

출처 : 인프런 - 처음 만난 리액트 강의 https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard

[지금 무료]처음 만난 리액트(React) 강의 | Inje Lee (소플) - 인프런