프론트엔드 개발자 취업 공고를 들여다보면 필수 자격 요건에 React가 자주 눈에 띌 텐데요. 이번 글에서는 React를 이해하기 위한 기본 개념부터 React 장점, React와 함께 배우면 좋은 기술들을 함께 살펴보겠습니다.
1. React란?
React(리액트)는 전 세계에서 Node.js 다음으로 인기 있는 웹 개발 기술입니다. 2023년 기준으로 전 세계 웹 개발자의 40.58%가 리액트를 사용하고 있죠. 페이스북, 인스타그램은 물론 에어비앤비, 넷플릭스, 디스코드, 트위터 등 수많은 기업이 채택했어요. 리액트가 무엇이기에 이렇게 인기 있는 도구가 되었을까요?
리액트는 2013년 메타(전 페이스북)가 오픈소스로 공개한 프론트엔드 Javascript 라이브러리입니다. 라이브러리는 특정 기능을 수행하는 코드들의 집합으로 개발 시 필요한 기능을 직접 호출해서 사용할 수 있는데요. 리액트는 복잡한 UI도 ‘컴포넌트’라는 작은 단위 기반으로 단순하게 개발할 수 있고 다른 라이브러리나 프레임워크도 함께 활용하기 쉽죠. 이런 장점 덕분에 프론트엔드 개발 분야에서 대세가 되었습니다.
- React의 등장 배경
메타는 오픈소스로 공개하기 2년 전, 리액트를 처음 개발했습니다. 메타가 서비스하는 페이스북은 고객과의 상호작용이 많아 엄청난 데이터가 실시간으로 생성, 삭제, 수정되는데요. 이렇게 지속적으로 데이터가 변함에도 안정적인 화면을 보여줄 수 있는 기술이 필요했죠. 이런 배경에서 사용자 인터페이스(UI) 개발에 초점을 맞춘 프론트엔드 라이브러리인 리액트를 고안하게 된 것입니다.
- React의 특징
리액트는 데이터가 변할 때마다 화면을 새로 띄우는 대신, 필요한 곳만 업데이트 해주는 형식입니다. ‘가상 DOM(Document Object Model)’이라는 개념이 이를 가능케 하는데요. DOM은 HTML 문서를 브라우저가 이해할 수 있도록 만든 자료 구조예요. DOM에 변화가 생기면 브라우저는 이 변화를 반영하기 위해 계속 연산을 하게 되는데요. 변화가 많으면 그만큼 연산량도 많아지므로, 전체적으로 효율이 떨어집니다.
가상 DOM은 실제 DOM보다는 가벼운 복제품이에요. 데이터에 변화가 생겼을 때 브라우저와 연결된 실제 DOM에 입력하는 대신 가상 DOM에 먼저 입력하고 가상 DOM과 기존 DOM를 비교해 최소한의 부분만을 찾아 업데이트 하는 원리죠.
덕분에 빠른 로딩 속도와 반응성 높은 UI를 구현할 수 있게 됐습니다. 데이터 규모가 클수록, 데이터 변경이 많을수록 리액트는 더 큰 힘을 발휘하죠.
2. React 장점
- 개발 생산성이 높다
앞서 말했듯이 리액트는 ‘컴포넌트’라는 작은 코드 조각을 기본 단위로 UI를 구성하는데요. 화면에 구성되는 요소들을 하나하나 개발하지 않고 반복되는 것들은 컴포넌트를 재사용해 생산성을 높일 수 있죠. 레고를 조립할 때 단순한 블록으로 수많은 형태를 완성하는 형식과 비슷합니다. 오류가 생겼을 때도 전체 페이지를 수정하는 대신 해당 컴포넌트만 수정하면 되기 때문에 해결하기 쉽습니다.
- 입문자도 흥미를 쉽게 느낄 수 있다
프론트엔드 개발은 보이는 영역의 웹 화면을 설계하기 때문에 입문 개발자도 쉽게 흥미를 느낄 수 있습니다. 전체적인 레이아웃, 배치, 디자인, 고객과의 상호작용까지 직접 구현할 수 있기 때문에 서비스에 기여하는 바가 명확하게 눈에 보이죠.
- 사용하는 기업이 많다
전 세계 65만 개 프론트엔드 채용 공고를 분석한 결과, 리액트 채용 공고는 약 35만 5000개 정도로 압도적인 1위를 차지했습니다. 국내 기업만을 분석한 통계는 없지만 쿠팡, 11번가, 티몬, 오피지지, 카카오페이 등 수많은 기업에서 프론트엔드 개발에 리액트를 사용하고 있습니다.
3. React와 함께 학습하면 좋은 언어와 프레임워크
- TypeScript : 오류를 줄이고 개발 생산성 향상
타입스크립트(TypeScript)는 JavaScript의 확장 버전으로, 정적 타입 시스템을 제공합니다. 정적 타입 시스템은 코드 작성 중 발생할 수 있는 오류를 줄이고 유지 보수를 쉽게 만들죠.
타입스크립트를 함께 사용하면 코드의 가독성도 높일 수 있습니다. 코드의 의도를 보다 명확하게 표현할 수 있기 때문에 코드의 구조를 변경하는 작업도 더욱 수월하고 빠르게 이뤄집니다.
- Nest.js: 리액트 문법 그대로 리액트의 단점을 보완
리액트는 CSR(Client Side Rendering) 방식으로 동작합니다. CSR은 서버에서 데이터를 보내 브라우저에서 페이지를 만드는 방식이죠. CSR은 기본 구조 상 SEO(검색 엔진 최적화)에서 불리하다는 단점이 있는데, 이를 보완하는 것이 Nest.js입니다.
Nest.js는 리액트 문법을 그대로 사용하면서 SSR(Server Side Rendering) 방식으로 작동하는 프레임워크입니다. SSR은 서버가 페이지를 만들어 브라우저에게 전달하죠. 검색엔진이 이미 서버에서 만들어진 정보들을 가져올 수 있기 때문에 SEO에 유리하죠. 이외에도 리액트 개발을 보다 효율적으로 만들어주는 다양한 장점을 지니고 있습니다.
경쟁력 있는 프론트엔드 개발자가 되고 싶다면, 내일배움캠프 웹 개발 React 트랙에 지원하세요
프론트엔드 개발자에 관심이 생겼나요? 내일배움캠프 웹 개발 React 트랙에서는 수강생들이 경쟁력 있는 프론트엔드 개발자로 성장할 수 있도록 프로젝트 중심의 커리큘럼을 준비했습니다.
내일배움캠프에서는 Javascript, React는 물론, TypeScript, Nest.js까지 주니어 프론트엔드 개발자가 갖춰야 할 기본기를 탄탄히 기르는 동시에 여러 번의 프로젝트를 통해 현업에서 꼭 필요한 소프트 역량도 쌓을 수 있습니다.
개발 경험이 전혀 없는 비전공자여도 괜찮습니다. 내일배움캠프에서는 의지만 있다면 누구나 성장할 수 있도록 최적의 몰입 환경을 조성해 드립니다. 매니저의 밀착 관리, 오전 9시부터 오후 9시까지 언제나 도움을 구할 수 있는 기술 튜터, 기술적 역량에 따른 반편성 등 수강생들이 5개월 동안 성장에만 집중할 수 있도록 지원하죠.
내일배움캠프 웹 개발 트랙을 듣고, 취업까지 성공한 스토리가 궁금하다면 아래 글을 확인해 보세요.
참고 자료
Share article
Subscribe Newsletter
Stay connected for the latest news and insights.Get the latest news to stay informed.