React-장점-퍼즐-조각
React는 웹 페이지라는 그림의 퍼즐 조각을 만드는 도구

React는 무엇일까요? React의 의미와 장점에는 또 어떤 것들이 있을까요? React란 한마디로 웹 페이지라는 그림의 퍼즐 조각을 만드는 기술입니다. 여기서 그림은 웹 페이지나 모바일 웹의 화면 등 사용자가 보는 면입니다. React는 작은 단위로 나눈 부분을 모아 전체 그림을 만들어주는 도구이고요. React 프로그래머는 이 그림의 퍼즐 조각을 설계합니다.

React-퍼즐-조각-설계
퍼즐 조각을 설계하는 React 프로그래머 Daniel McCullough | Unsplash

잘 와닿지 않으신다구요? 괜찮습니다. 아래에서 조금 더 자세히 설명해보겠습니다. 이번 시간에는 React의 의미와 HTML, CSS, 자바스크립트(Javascript)와 비교해 React와 같은 프레임워크를 사용하면 좋은 이유를 살펴보겠습니다. 그럼 시작해볼까요?

React는 무엇일까?

여기에 우리가 그리고 싶은 그림이 있습니다. 이 그림은 웹 페이지라는 하나의 작품입니다. 우리는 들판에 피어난 여러 송이의 꽃과 풀로 이 그림을 채우고 싶습니다. 그리고 이것을 다른 사람들에게 보여주려고 합니다.

꽃들판-웹페이지-그림-조각
꽃과 풀, 나무, 산으로 이루어진 웹 페이지 Hector Ramon Perez | Unsplash

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

React 의미

React의 본질이 바로 여기에 있습니다. React는 이 '꽃'과 '풀', '산'이라는 조각을 모아 전체 그림을 만들어주는 도구입니다. 여기서 전체 그림(웹 페이지)이 사용자 인터페이스(UI)이고, 이 조각들이 바로 React의 컴포넌트(components)입니다.

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

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

React 기술적 정의

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

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

소스 코드로 함께 더 살펴볼까요?

jsx
<App>
<Header title="Gardening" />
<FlowerList flower={flower}/>
<GrassList grass={grass} />
<Footer />
</App>

이 코드에서 알 수 있듯이 React는 JSX(JavaScript XML)라는 문법을 사용합니다. JSX는 자바스크립트에서 확장된 문법이죠. HTML과는 다릅니다.

여기서 'Header', 'FlowerList', 'GrassList', 'Footer'는 컴포넌트입니다. 각 컴포넌트에서는 'props'라는 도구를 사용해 컴포넌트 안으로 변수에 담긴 정보를 직접 전달할 수도 있습니다(여기에서 전달된 변수는 flowergrass). 이 재료들은 앞서 말씀드렸듯이 개별적이며 재사용할 수 있는 조각입니다. 우리는 이 요소들의 얼개를 서로 잘 맞추어서 'App'라는 전체 그림, 사용자 인터페이스를 만드는 것이죠.

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

지금까지 우리는 React란 무엇인지 정의와 의미를 알아보았습니다. 신기술을 배우는 데는 수고와 노력이 듭니다. 배우는 과정은 즐겁지만 때로 고되기도 합니다. 기존에 사용하던 HTML, CSS, 자바스크립트가 있는데 왜 React라는 새로운 도구가 필요한 것일까요?

React 장점

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

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

React-장점-조직화-펜-분류
목적에 따라 UI 조각을 조직적으로 관리하는 React Edgar Chaparro | Unsplash

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

  • 전체 프로그램 설계를 깔끔하고 일관성 있게 정리할 수 있는 조직성(organization)이 강함
  • 미리 만들어 놓은 조각을 다시 사용할 수 있어 코드 재사용성(reusability)이 높음
  • 기본 웹 프로젝트뿐 아니라 모바일 앱(React Native[1]로 구현), 데스크탑 앱(Electron[2]으로 구현)을 만들 수 있다는 점에서 매우 유연성(flexibility)이 높음

React 외에도 구글의 Angular나 Vue 등 웹 페이지를 만드는 프레임워크가 있는데요, 그중에 React는 다른 프레임워크에 비해 사용자 수가 가장 많다는 것[3]도 큰 장점입니다. 사용자들이 많기 때문에 모르는 것이 생겨도 구글 검색을 통해 쉽고 빠르게 도움을 얻을 수 있기 때문이죠.

지금까지 우리는 React란 무엇인지, React의 목적과 장점을 살펴보았습니다. 지금 바로 이해가 가지 않으셔도 괜찮습니다. 실제로 React를 사용해 보시면서 손에 익히다 보면 자연스럽게 느끼실 수 있을 것입니다. 다음 시간에는 React를 시작하는 데 필요한 준비물과 환경 세팅을 공부해보도록 하겠습니다. 수고 많으셨습니다.

참고 문헌


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

©2022 Snug Archive. All rights reserved.

Contact me at snugarchive@gmail.com.