리액트 개요/ 웹프레임워크 – 리액트 튜토리얼 1

리액트 개요

리액트는 프론트엔드 프레임워크 입니다. 다른 말로는 웹의 클라이언트 부분을 담당하는 웹프레임워크로 공식 웹사이트에서의 소개는 A JavaScript library for building user interfaces – 유저 인터페이스(UI)를 구축하기 위한 자바 스크립트 라이브러리라고 되어 있습니다. 현재 메타라고 사명을 변경한 페이스북이 자사 UI를 위해 개발하기 시작했고 현재는 오픈소스로 공개되어 있습니다.

프론트엔드 프레임워크에는 무수한 종류가 있습니다만 statista의 2021년 통계에 의하면 리액트가 40.14%로 현재 가장 많은 웹사이트에서 사용되고 있습니다.

최근의 트렌드에서 웹사이트를 개발한다는 것은 리액트같은 프레임워크를 실무에서 사용한다는 것을 의미합니다. 물론 날 것의 HTML과 CSS, Javascript를 가지고도 웹사이트를 만들 수 있습니다만, 결국은 본인만의 라이브러리(재사용 가능한 코드)를 만들 것이기 때문에 가장 시장 점유율이 높고 검증된 웹프레임워크를 사용하는 것은 프로그래밍 철학적으로도 맞는 방향입니다. (Don’t reinvent the wheel – 수레바퀴를 다시 발명하지 마라)

리액트를 사용하는 대표적인 웹으로는 당연히 페이스북(facebook)이 첫번째이고 인스타그램, 넷플릭스, 트위터, 가상화폐거래소(Binance, 업비트), 로블록스(Roblox) 웹사이트 등 기능이 많다 싶은 웹사이트는 거의 리액트를 사용합니다. 이는 SPA 방식의 이점을 살려 대용량 서비스에 적합하기 때문인데요. 오늘날의 SNS같은 웹서비스는 한번 http 요청을 처리하면 서버가 할 일이 끝난게 아니라 끓임 없이 클라이언트의 요청을 처리합니다. (좋아요, 댓글 등) SPA방식은 필요한 정보만 딱 가져와서 브라우저를 업데이트 하기 때문에 서버도 좋고 클라이언트도 좋습니다. (React-Virtual-Dom)

기술적인 특징으로 SPA(Single Page Application), 컴포넌트 기반(Component-Based), JSX(JavaScript Syntax Extension) 사용이 있으며 16.8 버전부터 추가된 React Hook 등이 주요합니다.

리액트를 프레임워크라고도 하지만 공식 웹사이트의 설명처럼 라이브러리라고 하는데, 프레임워크가 특정한 앱의 형태라면 라이브러리는 좀 더 일반적으로 사용이 가능합니다.

웹프레임워크

웹프레임워크에 대한 약간의 설명을 추가하면 현재 대부분의 웹서비스(웹 응용 프로그램)는 클라이언트-서버 모델로 구성되어 있습니다. 이것을 전체를 개발하는 것을 웹프로그래밍이라고 하고 클라이언트 분야를 프론트엔드 서버 분야를 백엔드로 분리되어 있습니다.

웹의 역사로 보면 초창기에는 이 둘의 구분이 거의 없었습니다. CLI 방식의 운영체제(DOS, Unix)를 주로 쓰던 시대에 웹프로그래밍은 지금처럼 UI가 세분화되지 않았었고 그냥 한 사람이 서버 프로그램과 클라이언트 까지 만들었습니다. WWW(World Wide Web)의 브라우저(Browser) 초창기 까지도 딱히 프론트엔드 개발이라는 개념은 잘 없었는데 어쨋든 프로그래머가 서버의 로직과 사용자의 UI까지 알아서 만들어야 했습니다.

그런데 웹의 생태계가 점점 확장하면서 프론트엔드와 백엔드의 분리가 필요해졌고 각각의 분야들은 더욱 발전, 세분화 되어서 이제는 웹프레임워크를 사용합니다.

웹프레임워크라는 용어를 사용할 때 한 가지 구분해야 할 것은 백엔드(Backend)와 프론트엔드(Frontend)는 분리해서 봐야 합니다. 일반적으로 사용하는 언어도 구분 되있고 목적이 다르기 때문에 프로그래밍 방식에 차이가 있습니다. 공부 분야도 많이 다르니까 같은 웹개발자라고 하더라도 프론트엔드, 백엔드는 큰 차이가 있습니다. 그래서 웹프레임워크에 대해서 말할 때 이것이 프론트(front – 앞)인지 백(Back – 뒤)인지 꼭 구분해줄 필요가 있습니다. 맥락상 당연히 프론트엔드인지 백엔드인지 이해할 수 있다면 상관이 없지만 전체를 싸잡아서 웹프레임워크라고 말하는 것은 조금 한계가 있습니다.

또 하나 알아둬야 할 것은 백엔드와 프론트엔드는 다양한 조합으로 사용할 수 있고 때로 그 경계가 애매할 수 있습니다. 예를 들어서 백엔드는 파이썬의 장고, 프론트엔드는 리액트를 사용할 수 있고, .NET 플랫폼에서는 백엔드와 프론트엔드를 아우르는 툴체인을 제공하고 있습니다.

이렇게 용어를 정의하는 범위가 광범위한 이유는 웹이 워낙 방대한 생태계로 구성되어 있기 때문입니다. 웹프로그래밍에 대해서 한 두마디로 정의를 내리는 것은 상당히 어렵습니다. 페이스북의 컨퍼런스만 봐도 리액트 훅에 대해서만 시니어 엔지니어들이 나와서 몇시간 동안 설명을 합니다.

웹이 발전하는 속도는 개인이 아무리 죽어라 공부해도 따라가기도 벅찹니다. 그럴 때 일수록 컴퓨터와 IT기술의 근본 원리들을 돌아볼 필요가 있습니다. 한 사람이 모든 웹프레임워크를 다 할 수는 없지만 적어도 어떤 시대의 흐름, 트렌드 같은 방향성은 이해할 필요가 있다고 봅니다.

리액트에 대해서는 Vue 등 기존의 경쟁자나 flutter 같은 신생의 추격자들도 있으나, 어쨋든 현재 프론트엔드를 선도하고 있고 향후도 오랫동안 시장을 점유할 것으로 예상되므로 당장 실무나 프로젝트에 사용하지 않더라도 배울 가치는 있습니다. 지금의 프론트엔드도 시간이 지나면 또 다음 단계로 넘어갈 텐데 보통 그 전 세대의 문제들을 개선하는 방식으로 가기 때문에 미래를 위해서도 도움이 될 것이고요.

리액트 시작하기 전…

웹프레임워크는 코딩 초보자의 영역은 아닙니다. 물론 초보자가 리액트 부터 시작할 수는 있겠지만 기초가 없이는 중급 주제로 넘어가면 이해가 어렵고 프레임워크를 풀로 활용하기 어렵습니다.

리액트를 시작하기 전에 HTML, CSS, Javascript의 기초를 좀 닦아두는 것을 권장합니다. 이 세개는 프론트엔드의 기본으로 리액트도 브라우저에서 실행될 때는 HTML, CSS, Javascript로 변환됩니다. HTML이나 CSS는 주로 눈으로 보면서 하는 거니까 크게 어렵지 않은데 자바스크립트의 경우 이게 쉬운 언어는 아닙니다.

과거 시절 토이 프로젝트에서나 사용하는 언어라고 무시를 당했는데 현재는 급이 커져서 ES6 이후의 자바스크립트는 상당히 방대한 언어가 되어 있습니다. 초보자들이 몇달 배워서 마스터할 수준의 언어는 아닙니다. 그러나 다행히 프론트엔드에서는 대체적으로 자바스크립트를 아주 깊게까지 몰라도 그럭저럭 학습을 이어나갈 수는 있을 겁니다. 원래 프로그래밍은 아무것도 모르는 상태에서 시작해서 적당히 모르는 상태로 학습을 계속 이어나가게 되는데 이게 너무 모르는 상태가 오래되면 중도에 포기하기 쉽습니다. 프레임워크는 그 베이스 언어를 모르면 중도 포기가 쉽습니다.

자바스크립트의 기본적인 내용(변수, 함수, 객체 같은 기본 주제)을 이해하고 리액트로 들어와도 괜찮을 것 같습니다.

그럼 다음 포스팅부터 리액트를 본격적으로 시작해 보겠습니다.

Leave a Comment