React 의미와 장점
React는 웹 페이지의 퍼즐 조각을 만든다
React는 무엇일까요? React의 의미와 장점에는 또 어떤 것들이 있을까요? React란 한마디로 웹 페이지라는 그림의 퍼즐 조각을 만드는 기술입니다. 여기서 그림은 웹 페이지나 모바일 웹의 화면 등 사용자가 보는 면입니다. React는 작은 단위로 나눈 부분을 모아 전체 그림을 만들어주는 도구이고요. React 프로그래머는 이 그림의 퍼즐 조각을 설계합니다.
잘 와닿지 않으신다구요? 괜찮습니다. 아래에서 조금 더 자세히 설명해보겠습니다. 이번 시간에는 React의 의미와 HTML, CSS, 자바스크립트(Javascript)와 비교해 React와 같은 프레임워크를 사용하면 좋은 이유를 살펴보겠습니다. 그럼 시작해볼까요?
React는 무엇일까?
여기에 우리가 그리고 싶은 그림이 있습니다. 이 그림은 웹 페이지라는 하나의 작품입니다. 우리는 들판에 피어난 여러 송이의 꽃과 풀로 이 그림을 채우고 싶습니다. 그리고 이것을 다른 사람들에게 보여주려고 합니다.
이 그림을 가장 효율적으로 그리는 방법은 무엇일까요? 만약 '꽃'과 '풀', '산'이라는 이름으로 된 조각을 미리 만들어 놓고, 이것을 여러 번 다시 사용하면 어떨까요? 그러면 우리는 매번 꽃과 풀을 직접 그리지 않고 빠르게 들판을 완성할 수 있을 것입니다. 우리가 이미 만들어 놓은 것을 가져다 쓰기만 하면 되니까요.
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'라는 도구를 사용해 컴포넌트 안으로 변수에 담긴 정보를 직접 전달할 수도 있습니다(여기에서 전달된 변수는 flower와 grass). 이 재료들은 앞서 말씀드렸듯이 개별적이며 재사용할 수 있는 조각입니다. 우리는 이 요소들의 얼개를 서로 잘 맞추어서 'App'라는 전체 그림, 사용자 인터페이스를 만드는 것이죠.
지금까지 우리는 React란 무엇인지 정의와 의미를 알아보았습니다. 신기술을 배우는 데는 수고와 노력이 듭니다. 배우는 과정은 즐겁지만 때로 고되기도 합니다. 기존에 사용하던 HTML, CSS, 자바스크립트가 있는데 왜 React라는 새로운 도구가 필요한 것일까요?
React 장점
React는 HTML, CSS, 자바스크립트만으로 웹 페이지를 만드는 것과 비교해 큰 이점이 있습니다. 첫째로, 프로그램 설계를 조직화할 수 있습니다. 웹 페이지를 HTML로 만들다 보면 같은 부분을 여러 번 다시 사용해야 하는 번거로움이 있습니다. 그런 부분이 적으면 손으로 조금 수고하면 그만입니다.
하지만 웹 사이트가 커질수록 관리도 어려워집니다. 루트(route)가 수십 개이고 그 안에 사용되는 코드가 수 백 줄인 웹 사이트를 만들다 보면 넘쳐나는 코드를 관리하기가 여간 힘든 것이 아닙니다. 이때 중복되는 부분을 아예 한 묶음으로 만들어 원할 때마다 그 조각을 따로 가져다 쓸 수 있다면 얼마나 편리할까요? 또 전체 프로그램을 얼마나 깔끔하고 조직적으로 관리할 수 있을까요?
이런 필요성에서 만들어진 것이 바로 React와 같은 프레임워크입니다. 저도 React를 사용해보면서 React의 장점을 직접 느낄 수 있었습니다. HTML, CSS, 자바스크립트만으로 웹 페이지를 만드는 것과 비교해 React를 사용하면 좋은 점을 정리해보면 다음과 같습니다.
React 외에도 구글의 Angular나 Vue 등 웹 페이지를 만드는 프레임워크가 있는데요, 그중에 React는 다른 프레임워크에 비해 사용자 수가 가장 많다는 것[3]도 큰 장점입니다. 사용자들이 많기 때문에 모르는 것이 생겨도 구글 검색을 통해 쉽고 빠르게 도움을 얻을 수 있기 때문이죠.
지금까지 우리는 React란 무엇인지, React의 목적과 장점을 살펴보았습니다. 지금 바로 이해가 가지 않으셔도 괜찮습니다. 실제로 React를 사용해 보시면서 손에 익히다 보면 자연스럽게 느끼실 수 있을 것입니다. 다음 시간에는 React 설치 create-react-app (2022년 기준)에서 React를 시작하는 데 필요한 준비물과 환경 세팅을 공부해보도록 하겠습니다. 수고 많으셨습니다.
참고 문헌
- [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/"