[TIL] sparta 19일차 - 리액트(React), 컴포넌트, JSX

 

리액트(React)

1. Facebook에서 개발한 오픈 소스 자바스크립트 라이브러리

2. 사용자 인터페이스(UI)를 만들기 위한 도구

3. 리액트는 단일 페이지 애플리케이션(Single Page Applications) 및 웹 애플리케이션의 UI를 만들기 위해 사용

 

 

가상 DOM(Virtual DOM)

🔹가상 DOM은 실제 DOM의 복제본

🔹 가상 DOM(Virtual DOM)이라는 개념을 통해 성능을 최적화

🔹 DOM을 직접 조작하는 대신, 변경된 부분만을 업데이트하는 방식으로 작동하여 성능이 향상된다

 

 

컴포넌트

🔸UI의 일부를 제어하는 재사용 가능한 코드

🔸 리액트는 컴포넌트 기반의 아키텍처를 사용

🔸 개념적으로 컴포넌트는 JavaScript 함수와 유사함

🔸 각 컴포넌트는 독립적이며, 재사용이 가능하고 관리하기 쉽다

 

 

JSX

리액트(React)에서 사용되는 자바스크립트의 확장 문법

UI 요소를 선언하는데 사용

JSX는 자바스크립트 코드 안에서 HTML과 유사한 구문을 사용하여 UI를 작성

 

 

JSX를 사용하여 컴포넌트를 생성

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

const element = <Greeting name="John" />;

 Greeting 컴포넌트가 JSX를 사용하여 정의되었고,

<Greeting name="John" />를 통해 컴포넌트를 렌더링할 수 있다