React

안녕하세요. 오늘은 리액트(React)에 대해 알아볼게요.

 

 

 

리액트(React)

 

리액트는 사용자 인터페이스(UI)를 효율적으로 구축하기 위한 자바스크립트 라이브러리예요.

 

즉, 웹 애플리케이션의 화면(View)을 관리하는 데 초점을 맞춘 도구예요.

 

우리가 기존에 HTML, CSS, JS(또는 TS)를 각각 따로 사용했다면,

React는 이들을 컴포넌트 단위로 통합하여 개발자가 UI를 더 구조적이고 직관적으로 관리할 수 있도록 도와줘요.

 

 

 

프레임워크(Framework)와 라이브러리(Library)의 차이

 

React를 이해할 때 자주 나오는 개념이 바로 “라이브러리 vs 프레임워크” 에요.

 

둘 다 개발을 돕는 도구이지만, 제어의 주체가 달라요. 다음 표로 비교해 볼게요.

구분	프레임워크	라이브러리
제어의 주체	프레임워크가 개발자를 제어	개발자가 라이브러리를 제어
구조	전체 애플리케이션의 틀 제공 (MVC 등)	특정 기능에 초점 (뷰, 상태 등)
예시	Angular, Spring, Django	React, Lodash, Axios
특징	“이 틀 안에서 개발해라”	“원하는 기능만 가져다 써라”

애플리케이션의 나머지 구조(데이터 관리, 라우팅 등)는 개발자가 선택한 다른 라이브러리와 함께 조합해서 사용해요.

 

 

 

React의 특징

 

1. 선언적(Declarative) UI

 

React는 명령형으로 “무엇을 어떻게 할지”를 작성하지 않고,
선언형으로 “현재 상태가 어떤 UI를 보여줘야 하는지”를 기술해요.

{isLogin ? <p>환영합니다 😊</p> : <p>로그인해주세요 🙏</p>}

위 예시는 “상태(isLogin)에 따라 화면을 자동으로 업데이트”하는 방식으로 동작해요.

개발자가 직접 DOM을 수정할 필요 없이, React가 자동으로 필요한 부분만 업데이트해 줘요.

 

 

2. 컴포넌트(Component) 기반 구조

 

React 애플리케이션은 작고 독립적인 컴포넌트들의 조합으로 이루어져요.

각 컴포넌트는 자신의 상태(State)와 UI를 관리하며, 필요에 따라 재사용돼요.

function WelcomeMessage({ user }: { user: string }) {
  return <h1>안녕하세요, {user}님!</h1>;
}

export default function App() {
  return (
    <div>
      <WelcomeMessage user="홍길동" />
      <WelcomeMessage user="김영희" />
    </div>
  );
}

위의 예시처럼 컴포넌트를 여러 번 재사용할 수 있고, 유지보수 또한 쉬워져요.

 

 

3. Virtual DOM (가상 DOM)

 

React는 실제 DOM을 직접 조작하지 않고, Virtual DOM(가상의 DOM)을 먼저 수정한 뒤

실제 DOM과 비교(diffing)하여 변화된 부분만 업데이트해요.

 

이 방식은 전체 페이지를 다시 그리는 전통적인 방식보다 훨씬 빠르고 효율적이에요.

결과적으로 애플리케이션의 렌더링 성능을 크게 향상할 수 있어요.

 

 

4. JSX (JavaScript + XML)

 

JSX는 JavaScript 코드 안에서 HTML처럼 구조를 표현할 수 있게 해주는 문법이에요.

React 컴포넌트는 대부분 JSX로 작성되며, 이는 UI 구조를 직관적으로 설계할 수 있게 해 줘.

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

JSX는 내부적으로 React.createElement() 함수로 변환되어 JavaScript 코드로 실행돼요.

즉, HTML처럼 보여도 결국 JS 코드라는 점이 핵심이에요.

 

 

SPA (Single Page Application)와 React

 

SPA(Single Page Application)는 이름 그대로,

하나의 HTML 페이지 안에서 모든 화면 전환을 처리하는 웹 애플리케이션 구조예요.

 

기존의 웹은 페이지를 이동할 때마다 서버에서 새로운 HTML을 받아와요.

하지만 SPA는 최초 한 번만 페이지를 로드하고, 이후에는 필요한 데이터만 비동기적으로 가져와 화면을 갱신해요.

 

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

이처럼 React는 SPA 개발에 최적화되어 있으며, 빠르고 자연스러운 사용자 경험을 제공해요.

 

 

 

여기까지 리액트에 대해 알아봤는데요.

 

React는 단순히 화면을 그리는 도구가 아니라,

 

웹 애플리케이션을 컴포넌트 중심으로 사고하게 만들어주는 철학적인 라이브러리예요.

 

리액트를 잘 활용한다면 유지보수가 쉽고 개발이 편리할 것 같아요.