리액트(React)란 웹페이지라는 그림을 구성하는 퍼즐 조각을 만드는 기술입니다. 여기서 그림은 웹 페이지나 모바일 웹 등 사용자가 보는 화면입니다. 리액트는 작은 단위의 퍼즐을 한 데 모아 전체 그림을 만들어줍니다. 리액트 프로그래머는 이 퍼즐 조각을 설계하고요.
이번 시간에는 리액트의 정의와 원리, 그리고 HTML, CSS, 자바스크립트(Javascript)와 비교해 리액트를 사용하면 좋은 이유를 살펴보겠습니다.
리액트란 무엇일까?
여기에 우리가 그리고 싶은 그림이 있습니다. 이 그림은 웹 페이지라는 하나의 작품입니다.
우리는 이 들판을 여러 송이의 꽃과 풀로 채우고 싶습니다. 이 그림을 가장 효율적으로 그리는 방법은 무엇일까요? 만약 '꽃'과 '풀', '나무'라는 이름으로 된 조각을 미리 만들어 놓고, 이것을 여러 번 다시 사용하면 어떨까요? 그러면 우리는 꽃과 풀을 매번 직접 그리지 않고 빠르게 그림을 완성할 수 있을 것입니다. 우리가 이미 만들어 놓은 것을 가져다 쓰기만 하면 되니까요.
의미
리액트의 본질이 바로 여기에 있습니다. 리액트는 '꽃'과 '풀', '산' 등 작은 조각을 모아 전체 그림을 만들어주는 도구입니다. 이 조각들을 모으면 전체 그림(웹 페이지)인 사용자 인터페이스(UI)가 됩니다.
- 사용자 인터페이스(user interfaces, UI)
- 사용자 인터페이스 또는 유저 인터페이스(user interfaces, UI)는 사람(사용자)과 사물 또는 시스템(기계, 컴퓨터 프로그램 등) 사이에서 의사소통을 할 수 있도록 돕는 물리적, 가상적 매개체
리액트를 사용하면 UI를 재사용이 가능하고 서로 독립적인 조각 여러 개로 나누어 관리할 수 있습니다. 그래서 리액트를 UI 라이브러리라고 부릅니다. 리액트를 기술적으로는 다음과 같이 정의합니다.
기술적 정의
리액트란 페이스북(Facebook)이 개발한 사용자 인터페이스를 만드는 데 사용하는 자바스크립트 라이브러리(library)
입니다. 리액트는 라이브러리지만 앵귤러(Angular)와 같은 타입스크립트(typescript) 기반 프론트엔드 웹 애플리케이션 프레임워크(framework)와도 동일한 목적을 수행해 라이브러리보다 더 큰 개념인 프레임워크로도 여겨집니다.
- 라이브러리(library)
- 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 구체적이고 명확히 정의된 자원의 모임. 라이브러리에서는 어플리케이션 개발 흐름의 주도권이 나에게 있음. 예를 들어 내가 만든 집(프로그램)이 이미 있고 이케아(IKEA)라는 라이브러리에 가서 내 집을 꾸밀 도구들을 사 와서 꾸미는 것
- 프레임워크(framework)
- 복잡한 문제를 해결하거나 서술하는 데 사용되는 기본 개념 구조 또는 뼈대(skeleton). 프레임워크에서는 프로그램 개발 흐름의 주도권이 내가 아닌 프레임워크에 있음. 나는 이미 구현된 프레임워크 안에서 내가 만든 소스를 조립해 더하는 것
UI 퍼즐 조각들이 바로 리액트의 컴포넌트(components)입니다. 소스 코드로도 살펴보겠습니다.
소스 코드 예시
위 그림을 리액트의 소스 코드로 표현하면 다음과 같습니다.
jsximport 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은 최상위 컴포넌트이고, 컴포넌트는 중첩하여 사용할 수 있습니다. 리액트 컴포넌트는 다음과 같이 생겼습니다.
jsxconst 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.jsimport 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이라는 전체 그림, 즉 사용자 인터페이스를 만드는 것입니다.
지금까지 우리는 리액트란 무엇인지 정의와 의미, 원리를 알아보았습니다. 그런데 기존에 사용하던 HTML, CSS, 자바스크립트가 있는데 왜 리액트라는 새로운 도구가 필요한 것일까요?
장점
React는 HTML, CSS, 자바스크립트만으로 웹 페이지를 만드는 것과 비교해 큰 이점이 있습니다. 첫째로, 프로그램 설계를 조직화할 수 있습니다. 웹 페이지를 HTML로 만들다 보면 같은 부분을 여러 번 다시 사용해야 하는 번거로움이 있습니다. 그런 부분이 적으면 손으로 조금 수고하면 그만입니다.
하지만 웹 사이트가 커질수록 관리도 어려워집니다. 루트(route)가 수십 개이고 그 안에 사용되는 코드가 수 백 줄인 웹 사이트를 만들다 보면 넘쳐나는 코드를 관리하기가 여간 힘든 것이 아닙니다. 이때 중복되는 부분을 아예 한 묶음으로 만들어 원할 때마다 그 조각을 따로 가져다 쓸 수 있다면 얼마나 편리할까요? 또 전체 프로그램을 얼마나 깔끔하고 조직적으로 관리할 수 있을까요?
이런 필요성에서 만들어진 것이 바로 리액트와 같은 프레임워크입니다. HTML, CSS, 자바스크립트만으로 웹 페이지를 만드는 것과 비교해 리액트를 사용하면 좋은 점을 정리해보면 다음과 같습니다.
리액트 외에도 구글의 앵귤러(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/"