React는 자바스크립트 라이브러리며 사용자 인터페이스를 만들기 위해 사용된다.
React는 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 만들기 위해 주로 사용된다. React는 Jordan Walke가 2011년에 페이스북 엔지니어로서 처음으로 발표한 후, 페이스북 뉴스피드를 통해 소개되었다. 그리고 그 이후로 React는 전세계적으로 가장 인기있는 JavaScript 라이브러리 중 하나로 인정받고 있다.
리액트 특징
Components
컴포넌트는 재사용 가능한 독립된 모듈을 의미한다. HTML을 처음 배웠을 때 Box modal을 예로 들면 이해하기 쉬울 것이다.
컴포넌트는 레고 블록처럼 하나씩 조립하여 완성품을 만들고, 재사용이 용이하여 개발 생산성을 향상시키고 유지보수를 더욱 쉽게 해주는 특징을 가지고 있다. 그리고 각각의 컴포넌트는 독립적으로 작동하며, 필요에 따라 조합하여 다양한 기능을 가진 애플리케이션을 구성할 수 있고. 이런 컴포넌트 기반 개발 접근 방식은 React에서 특히 강조되며, 코드의 재사용성과 유지보수성을 높여주는 장점을 제공하고 있다.
Virtual DOM
리액트에서 Virtual DOM은 실제 DOM의 가상 복사본으로 생각하면 된다. 이는 리액트의 핵심 개념 중 하나이며 Virtual DOM은 컴포넌트의 상태 변화를 추적하고, 변경된 부분만을 실제 DOM에 반영하여 성능을 향상시킬 수 있도록 도와누는 것이다
실제 DOM 조작은 비용이 많이 들기 때문에, Virtual DOM은 변경된 부분만을 업데이트하는 방식으로 작동해서. 컴포넌트의 상태가 변경될 때마다 Virtual DOM을 업데이트하고, 이후 실제 DOM과 비교하여 변경된 부분만을 감지해서 실제 DOM에 반영이 되는 것이다. 이를 통해 필요한 부분만 조작하고 업데이트함으로써 불필요한 DOM 조작을 최소화하고 성능을 향상시킬 수 있는 것이다.
JSX
리액트에서는 JSX 문법을 사용하여 HTML과 JavaScript를 조합한 형태로 컴포넌트를 구성할 수 있다. JSX는 HTML과 JavaScript를 동시에 사용할 수 있도록 해주며, 각각의 컴포넌트는 함수 형태로 구성되고. 그리고 JSX 문법을 사용하기 위해서는 컴포넌트 내부를 항상 <></>로 감싸주어야 한다. 이를 통해 리액트 컴포넌트에서 HTML과 JavaScript를 함께 사용할 수 있습니다.
import React from 'react';
const TodoList = ({ todos }) => (
<ul>
{todos.map((todo) => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
);
SPA (Single Page Application)
일반적으로 웹페이지에서 사용자가 이동할 때마다 서버로부터 새로운 HTML, CSS, JS를 받아와 화면을 다시 렌더링하는 방식은 비효율적이며, 렌더링 시간도 오래 걸린다.
하지만 리액트는 SPA(Single Page Application)를 통해 이러한 문제점을 효율적으로 개선할 수 있었다. SPA는 페이지 간의 전환 없이 동적으로 내용을 업데이트하여 사용자와 상호작용을 한다. 즉, 최초에 필요한 리소스(HTML, CSS, JS)를 한 번만 불러오고, 이후에는 필요한 데이터만을 서버로부터 받아와서 화면을 업데이트하는 방식이다. 이로써 불필요한 리소스 다운로드를 줄이고, 빠른 성능과 부드러운 사용자 경험을 제공해서, SPA는 리액트와 같은 프론트엔드 프레임워크와 함께 사용되어 효과적인 웹 애플리케이션 개발을 가능하게 하는 것이다.
