React.js란?

개발자 구인시장에서 가장 핫한 걸 대보라면 나오는 게 리액트 자바스크립트다.

뭔지 정도는 알아두면 좋을 것 같아서 정리해두려고 한다.

 

위키백과에서 리액트에 대해 말하는 건 아래와 같다.

https://ko.wikipedia.org/wiki/%EB%A6%AC%EC%95%A1%ED%8A%B8_(%EC%9B%B9_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC) 

리액트 (웹 프레임워크) - 위키백과, 우리 모두의 백과사전

리액트는 자바스크립트 라이브러리의 하나로서 UI를 만들기 위해 쓰인다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다.
리액트는 싱글 페이지 애플리케이션(SPA)나 모바일 앱 개발에 쓰일 수 있다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API 통신 등의 기능이 요구되는데 리액트에는 기본 제공되지 않기 때문에 추가 라이브러리를 사용해야 한다.
리액트는 페이스북 소프트웨어 엔지니어 Jordan Walke가 개발했다. 그는 PHP용 HTML 컴포넌트 프레임워크인 XHP에 영향을 받았다. 2011년 페이스북 뉴스피드에 처음 적용됐다가 2012년 인스타그램에 적용됐다. 2013년 5월 오픈소스화되었다.

 

정리하면 리액트 JS는 페이스북의 어떤 엔지니어가 만든 오픈소스 자바스크립트 라이브러리고, 동적으로 변하는 페이지를 만들 때나 사용한다는 것 같다. 모바일 앱 개발 쪽은 이 포스팅의 주제와는 맞지 않으니 생략한다.

여기서 정의를 잘 모르겠는 게 싱글 페이지 애플리케이션이다. 이것도 위키백과에서 설명하고 있긴 하다.

 

https://ko.wikipedia.org/wiki/%EC%8B%B1%EA%B8%80_%ED%8E%98%EC%9D%B4%EC%A7%80_%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98

싱글 페이지 애플리케이션 - 위키백과, 우리 모두의 백과사전

싱글 페이지 애플리케이션(SPA)은 서버로부터 완전한 새 페이지를 불러오지 않고, 현재 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 앱이나 웹 사이트를 말한다. 이런 접근은 연속되는 페이지들 간의 사용자 경험의 간섭을 막아주고 앱이 더 데스크톱 애플리케이션처럼 동작하도록 만들어준다. SPA에서 HTML, JS, CSS 등 필요한 모든 코드는 하나의 페이지로 불러오거나 적절한 자원들을 동적으로 불러들여서(동적 적재, 동적 링크) 필요하면 문서에 추가하는데, 보통 사용자의 동작에 응답하는 방식이다. 

 

대충 새로고침 없이 사용자 행동에 따라 필요한 데이터를 동적으로 갈아끼워서 바로바로 보여주는 웹 사이트가 SPA라는 것 같다.

 

다시 리액트로 돌아가서, 리액트는 처음에 페이스북이 만들었다. 그런데 페이스북이 왜 리액트를 만들었을까? 뭔가 목적이 있어서 만들었을 것이다.

 

https://www.quora.com/Why-did-Facebook-create-React-1

Why did Facebook create React?

간단히 말해서 그들은 MVC 같은 프레임워크가 필요했고 구글에서 개발했기 때문에 당시 가장 인기있는 AngularJS를 쓰고 싶지 않았다. 당시 페이스북의 아키텍처는 상호작용을 처리하기 위해 약간의 자바스크립트를 써서 서버 기반 렌더링(php 사용)이었기 때문에 프레임워크가 필요했다. 대부분의 대형 기술 회사와 마찬가지로 페이스북은 자체 도구를 만드는 데 매우 치우쳤고 특히 구글 기술을 사용하는 데 신중했다...(중략)

 

https://blog.risingstack.com/the-history-of-react-js-on-a-timeline/

The History of React.js on a Timeline | @RisingStack

2011년 페이스북의 개발자는 코드 유지 관리와 관련된 몇 가지 문제에 직면했다. 페이스북 광고 앱이 점점 더 많은 기능을 갖게 되면서 팀은 이 앱을 완벽하게 실행하기 위해 더 많은 사람들이 필요했다. 팀 구성원과 앱 기능이 늘어나면서 회사의 속도가 느려졌다. 시간이 지나며 많은 계단식 업데이트에 직면해 앱을 처리하기가 어려워졌고 이것에 따라갈 수 없게 되었다. 그래서 Jordan Walke는 프로세스를 효율적으로 만드는 프로토타입을 만들었고 이게 리액트의 탄생을 의미한다.

 

https://soldonii.tistory.com/100

리액트의 탄생배경과 핵심 개념

시간이 흐르면서 웹 앱의 크기가 커지자 JS 파일이 넘치면서 통제가 어려워졌고 이를 효율적으로 관리하기 위해 backbone.js 같은 라이브러리가 나오면서 JS 파일의 조직적 관리가 용이해졌다. 그러면서 HTML, CSS, JS 중 JS의 중요성이 커지기 시작했고 그러면서 SPA가 등장했다.
전통적으로 웹 페이지는 모든 페이지마다 HTML, CSS, JS 파일을 각기 갖고 있어야 했고, 따라서 페이지 간 이동할 때마다 3가지 파일을 서버와 주고받았기 때문에 속도가 느릴 수밖에 없었다. SPA는 HTML, CSS, JS를 최초 1번만 불러오고 이후에는 JS 파일을 필요해 DOM 또는 필요한 HTML 파일을 조작하는 방식이다.
이후 구글의 Angular.js 프레임워크가 등장했다. 앵귤러는 작은 컨테이너들이 모여 거대한 앱을 구성하도록 설계된 프레임워크다. 하지만 앱이 커지고 사용자가 늘수록 홈페이지 안에서 사용자 상호작용이 기하급수적으로 증가하는데, 복잡성이 증가할수록 데이터 흐름이 어디로 이어지는지 파악하기가 어려웠고 디버깅도 어려워졌다.
페이스북도 유사한 문제를 갖고 있었고 따라서 코드베이스를 업그레이드할 필요성을 느껴 개발한 게 리액트다. 리액트는 위에서 말한 문제들에 기반해서 개발된 라이브러리기 때문에 데이터가 어디서 어디로 흐르는지 명확히 알 수 있는 장점을 가지면서 인기를 끌었고 현재도 그렇다.

 

리액트 이전에 앵귤러라는 자바스크립트 프레임워크가 있었는데, 웹의 규모가 커지고 사용자가 늘어나면서 사용자 상호작용이 많아지고 데이터 흐름 파악이 어려워지는 등의 이유로 웹 개발자들이 많이 힘들었던 것 같다. 당시 페이스북도 비슷한 문제가 있었는데 그래서 페이스북이 개발한 게 리액트라는 것 같다.

 

개인적으로 HTML, CSS, JS를 좋아하지 않아서 웹은 꺼려지는 분야지만 언젠가는 해야 할 분야긴 해서, 지금 인기있는 리액트에 대해 간단하게 정의하고 역사적 배경을 확인해봤다.