리액트(React) 의미와 장점

웹 페이지의 퍼즐 조각을 만든다

Last Updated 2024-08-26Published 2022-04-10

3분

리액트(React)란 웹페이지라는 그림을 구성하는 퍼즐 조각을 만드는 기술입니다. 여기서 그림은 웹 페이지나 모바일 웹 등 사용자가 보는 화면입니다. 리액트는 작은 단위의 퍼즐을 한 데 모아 전체 그림을 만들어줍니다. 리액트 프로그래머는 이 퍼즐 조각을 설계하고요.

퍼즐 조각을 설계하는 리액트 프로그래머 Daniel McCullough - Unsplash

이번 시간에는 리액트의 정의와 원리, 그리고 HTML, CSS, 자바스크립트(Javascript)와 비교해 리액트를 사용하면 좋은 이유를 살펴보겠습니다.

리액트란 무엇일까?

여기에 우리가 그리고 싶은 그림이 있습니다. 이 그림은 웹 페이지라는 하나의 작품입니다.

꽃과 풀, 나무, 산으로 이루어진 웹 페이지 Hector Ramon Perez - Unsplash

우리는 이 들판을 여러 송이의 꽃과 풀로 채우고 싶습니다. 이 그림을 가장 효율적으로 그리는 방법은 무엇일까요? 만약 '꽃'과 '풀', '나무'라는 이름으로 된 조각을 미리 만들어 놓고, 이것을 여러 번 다시 사용하면 어떨까요? 그러면 우리는 꽃과 풀을 매번 직접 그리지 않고 빠르게 그림을 완성할 수 있을 것입니다. 우리가 이미 만들어 놓은 것을 가져다 쓰기만 하면 되니까요.

의미

리액트의 본질이 바로 여기에 있습니다. 리액트는 '꽃'과 '풀', '산' 등 작은 조각을 모아 전체 그림을 만들어주는 도구입니다. 이 조각들을 모으면 전체 그림(웹 페이지)인 사용자 인터페이스(UI)가 됩니다.

사용자 인터페이스(user interfaces, UI): 사용자 인터페이스 또는 유저 인터페이스(user interfaces, UI)는 사람(사용자)과 사물 또는 시스템(기계, 컴퓨터 프로그램 등) 사이에서 의사소통을 할 수 있도록 돕는 물리적, 가상적 매개체

리액트를 사용하면 UI를 재사용이 가능하고 서로 독립적인 조각 여러 개로 나누어 관리할 수 있습니다. 그래서 리액트를 UI 라이브러리라고 부릅니다. 리액트를 기술적으로는 다음과 같이 정의합니다.

기술적 정의

리액트란 페이스북(Facebook)이 개발한 사용자 인터페이스를 만드는 데 사용하는 자바스크립트 라이브러리(library) 입니다. 리액트는 라이브러리지만 앵귤러(Angular)와 같은 타입스크립트(typescript) 기반 프론트엔드 웹 애플리케이션 프레임워크(framework)와도 동일한 목적을 수행해 라이브러리보다 더 큰 개념인 프레임워크로도 여겨집니다.

라이브러리(library): 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 구체적이고 명확히 정의된 자원의 모임. 라이브러리에서는 어플리케이션 개발 흐름의 주도권이 나에게 있음. 예를 들어 내가 만든 집(프로그램)이 이미 있고 이케아(IKEA)라는 라이브러리에 가서 내 집을 꾸밀 도구들을 사 와서 꾸미는 것
프레임워크(framework): 복잡한 문제를 해결하거나 서술하는 데 사용되는 기본 개념 구조 또는 뼈대(skeleton). 프레임워크에서는 프로그램 개발 흐름의 주도권이 내가 아닌 프레임워크에 있음. 나는 이미 구현된 프레임워크 안에서 내가 만든 소스를 조립해 더하는 것

UI 퍼즐 조각들이 바로 리액트의 컴포넌트(components)입니다. 소스 코드로도 살펴보겠습니다.

소스 코드 예시

위 그림을 리액트의 소스 코드로 표현하면 다음과 같습니다.

jsx
import React from 'react'
import Header from './Header'
import FlowerList from './FlowerList'
import GrassList from './GrassList'
import Footer from './Footer'

const flowerData = [
  { name: 'Rose', color: 'Red', bloomingSeason: 'Spring' },
  { name: 'Sunflower', color: 'Yellow', bloomingSeason: 'Summer' },
  { name: 'Tulip', color: 'Various', bloomingSeason: 'Spring' },
]

const grassData = [
  { name: 'Bermuda', type: 'Warm-season' },
  { name: 'Fescue', type: 'Cool-season' },
]

function App() {
  return (
    <div>
      <Header title="Gardening" />
      <FlowerList flower={flowerData} />
      <GrassList grass={grassData} />
      <Footer />
    </div>
  )
}

export default App

여기서 App, Header, FlowerList, GrassList, Footer는 모두 컴포넌트입니다. App은 최상위 컴포넌트이고, 컴포넌트는 중첩하여 사용할 수 있습니다. 리액트 컴포넌트는 다음과 같이 생겼습니다.

jsx
const FlowerList = ({ flower }) => {
  return (
    <div className="flower-list">
      <h2>꽃 목록</h2>
      <ul>
        {flower.map((item, index) => (
          <li key={index}>
            <h3>{item.name}</h3>
            <p>색상: {item.color}</p>
            <p>개화 시기: {item.bloomingSeason}</p>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default FlowerList

컴포넌트는 서로 독립적이며 재사용할 수 있습니다. 여기서는 flower={flowerData}와 같이 'props'라는 도구를 사용해 컴포넌트 안으로 데이터를 전달했습니다. 위와 같이 자바스크립트 내에서 HTML 태그를 작성할 수 있도록 만든 문법이 JSX(JavaScript XML)입니다.

그런데 JSX가 실제로 반환하는 것은 HTML이 아닙니다. HTML이 아닌데 어떻게 웹 브라우저에서 렌더링될 수 있는 것일까요?

원리

리액트는 JSX를 리액트 요소로 변환하여 웹 브라우저에 렌더링합니다. 단계는 다음과 같습니다.

JSX 작성: 개발자가 React 컴포넌트를 JSX로 작성합니다.

Babel 변환: Babel이 JSX 코드를 순수한 JavaScript로 변환합니다. 이 과정에서 JSX는 React.createElement() 함수 호출로 변환됩니다.

React 요소 생성: React.createElement() 함수가 호출되어 React 요소(일반 JavaScript 객체)를 생성합니다.

가상 DOM 구성: React는 이러한 React 요소들로 구성된 가상 DOM을 만듭니다.

ReactDOM.render() 호출: src/index.js 파일에서 ReactDOM.render() 함수가 호출됩니다. 이 함수는 최상위 컴포넌트(보통 App)를 인자로 받습니다.

실제 DOM과 비교: React는 가상 DOM을 실제 DOM과 비교합니다.

DOM 업데이트: 필요한 부분만 실제 DOM을 업데이트합니다.

브라우저 렌더링: 업데이트된 DOM이 브라우저에 의해 렌더링됩니다. 이 때 public/index.html 파일의 root id를 가진 DOM 요소 내에 전체 React 애플리케이션이 렌더링됩니다.

상태 변경 및 재렌더링: 이후 상태나 props가 변경되면, React는 이 과정을 다시 반복하여 필요한 부분만 효율적으로 업데이트합니다.

js
// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root'),
)

ReactDOM.render()는 React 애플리케이션의 최상위 컴포넌트(보통 App)를 public/index.html의 root id를 가진 DOM 요소 안에 렌더링합니다.

html
<!-- index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

우리는 컴포넌트 간 얼개를 잘 엮어 App이라는 전체 그림, 즉 사용자 인터페이스를 만드는 것입니다.

사용자 인터페이스를 만드는 라이브러리 React Killian Cartignies - Unsplash

지금까지 우리는 리액트란 무엇인지 정의와 의미, 원리를 알아보았습니다. 그런데 기존에 사용하던 HTML, CSS, 자바스크립트가 있는데 왜 리액트라는 새로운 도구가 필요한 것일까요?

장점

React는 HTML, CSS, 자바스크립트만으로 웹 페이지를 만드는 것과 비교해 큰 이점이 있습니다. 첫째로, 프로그램 설계를 조직화할 수 있습니다. 웹 페이지를 HTML로 만들다 보면 같은 부분을 여러 번 다시 사용해야 하는 번거로움이 있습니다. 그런 부분이 적으면 손으로 조금 수고하면 그만입니다.

하지만 웹 사이트가 커질수록 관리도 어려워집니다. 루트(route)가 수십 개이고 그 안에 사용되는 코드가 수 백 줄인 웹 사이트를 만들다 보면 넘쳐나는 코드를 관리하기가 여간 힘든 것이 아닙니다. 이때 중복되는 부분을 아예 한 묶음으로 만들어 원할 때마다 그 조각을 따로 가져다 쓸 수 있다면 얼마나 편리할까요? 또 전체 프로그램을 얼마나 깔끔하고 조직적으로 관리할 수 있을까요?

목적에 따라 UI 조각을 조직적으로 관리하는 React Edgar Chaparro - Unsplash

이런 필요성에서 만들어진 것이 바로 리액트와 같은 프레임워크입니다. HTML, CSS, 자바스크립트만으로 웹 페이지를 만드는 것과 비교해 리액트를 사용하면 좋은 점을 정리해보면 다음과 같습니다.

전체 프로그램 설계를 깔끔하고 일관성 있게 정리할 수 있는 조직성(organization)이 강함

미리 만들어 놓은 조각을 다시 사용할 수 있어 코드 재사용성(reusability)이 높음

기본 웹 프로젝트뿐 아니라 모바일 앱(React Native^[1]로 구현), 데스크탑 앱(Electron^[2]으로 구현)을 만들 수 있다는 점에서 매우 유연성(flexibility)이 높음

리액트 외에도 구글의 앵귤러(Angular)나 뷰(Vue) 등 웹 페이지를 만드는 다양한 프레임워크가 있습니다. 그중 리액트는 다른 프레임워크에 비해 사용자 수가 가장 많다는 것^[3]도 큰 장점입니다. 사용자들이 많기 때문에 모르는 것이 생겨도 구글 검색을 통해 쉽고 빠르게 도움을 얻을 수 있습니다.

지금까지 우리는 리액트란 무엇인지, 리액트의 사용 목적과 장점을 살펴보았습니다. 다음 시간에는 React 설치 create-react-app (2022년 기준)에서 리액트를 시작하는 데 필요한 준비물과 환경 설정 방법을 알아보겠습니다.

참고 문헌

[1] 위키피디아, ｢사용자 인터페이스｣, 위키피디아, "https://ko.wikipedia.org/wiki/사용자_인터페이스"
[2] Brad Traversy, (2022.01), ｢React Front To Back 2022: What Is React?｣" [비디오 파일]. "https://www.udemy.com/course/react-front-to-back-2022/"
[3] Brandon Wozniewicz, ｢The Difference Between a Framework and a Library｣, Free Code Camp, "https://www.freecodecamp.org/news/the-difference-between-a-framework-and-a-library-bd133054023f/"
[4] Shaumik Daityari, ｢Angular vs React vs Vue: Which Framework to Choose｣, Codeinwp, "https://www.codeinwp.com/blog/angular-vs-vue-vs-react/"

페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크로 안드로이드와 ios 용 웹 어플리케이션을 따로 개발하지 않고 한 번에 개발할 수 있다는 이점이 있음 ↩
데스크톱 그래픽 사용자 인터페이스 애플리케이션의 개발할 수 있는 오픈 소스 프레임워크 ↩
2021년 기준으로 Github의 "Used By 뱃지"를 살펴보면 Angular의 Github 저장소(repository)의 개수는 170만 개, Vue는 16만 7천 개, React는 5백 7십만 개로 추정 출처: Shaumik Daityari 블로그 포스트 ↩

0 Comments

리액트(React) 의미와 장점

웹 페이지의 퍼즐 조각을 만든다

목차

리액트란 무엇일까?

의미

기술적 정의

소스 코드 예시

원리

장점

참고 문헌

목차

리액트(React) 의미와 장점

웹 페이지의 퍼즐 조각을 만든다

목차

리액트란 무엇일까?

의미

기술적 정의

소스 코드 예시

원리

장점

참고 문헌

Footnotes

목차