[React/JS] 리왜씀 (React 왜 쓰나요)

https://ko.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

React 공식문서를 참고하면 아래와 같이 안내되어 있습니다.

• React는 상호작용이 많은 UI를 만들 때, 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하고, React는 데이터가 변경됨에 따라, 적절한 컴포넌트만 효율적으로 갱신하고 렌더링하게 됩니다.(이뭔솔?)

처음 본다면, 어떤 어려움이 있는지 모르겠습니다.  3줄요약으로 지르고 가겠습니다. 

1. React를 만든 Facebook은 데이터를 실시간으로 화면에 반영을 해야했다.
2. Facebook은 SNS기 때문에 반응성과 UI/UX가 매우 중요했다.
3. Facebook은 수억명의 사용자를 가진 거대한 SNS가 되었다.

Problem 1 . 데이터를 바로바로 화면에 반영하기

사용자 입장에서는 당연한 말이지만, 개발자의 입장에서는 전혀 "당연한"말이 아닙니다. 아래의 상황을 천천히 읽어보죠. 

• Facebook은 거대한 SNS 플랫폼으로, 수억개의 데이터들이 "실시간"으로 사용자의 화면(view)에 반영이 되어야 합니다. 예를들어, 사용자 A가 좋아요 버튼을 눌러서 "1k like"가 되었다면, 그 정보는 누른즉시, 모든 사용자에게 1k like로 보여야 합니다.
• 즉,  화면(view)을 데이터에 맞게 갱신(Update)시켜줘야 할겁니다.
• Facebook의 사용자는 "수 억명"이 되었고, Facebook의 실시간 입력은 "수백억~수천억"번이 되어버렸죠. 그래서, 실시간으로 데이터를 관리 해주고 화면에 반영하는 기능이 매우 중요해졌고, 그것을 위한 별도의 라이브러리인  React를 개발하게 되었다고 합니다. 

한줄요약

• 데이터와 화면(view)를 통일시켜주는 작업이 중요해졌습니다. 그걸 해결하기 위해서 , 데이터와 화면을 통일시켜주는 방법을 고안해낸 끝에, State관리, Rendering 등의 개념이 생겨나게 됩니다.

Problem 2. 데이터를 반영해주는건 좋았다. 그럼, 사용성을 잡아보자.

• MPA형태로 Facebook을 만들게 된다면, 좋아요를 클릭할 때마다, 데이터를 업데이트 할때마다, 피드(게시글)을 내릴 때마다 화면이 깜빡이면서 로딩이 될겁니다. 즉, 사용자 경험의 "연속성"을 헤치게 됩니다. SNS는 무엇보다 사용자의 경험이 중요한데 말이죠. 그래서 React로 작성하는 홈페이지는 기본적으로 SPA의 형태를 띄게 됩니다.

한줄요약

• 연속적인 사용자 경험을 주기 위해서, SPA형태를 채택함.

MPA , SPA는 따로 글을 적도록 하겠습니다 :) 

 

Problem 3. 사용자가 수억명 , 실시간 입력은 그 이상

• 사용자가 점점 늘어남에 따라, 실시간 입력의 처리 속도를 향상시켜야 했고, React라는 Library도 발전하게 됬을거임.그러면서 Virtual DOM의 개념 HTTP 통신을 위한 Axios ,전역 상태 관리를 위한 Redux, SPA를 MPA로 쓰기 위한Router 등의 다양한 라이브러리도 추가적으로 쓰기 시작했을것 같다. (저의 뇌피셜 입니다.)

한줄요약

• 대용량 처리를 하기 위해 다양한 툴을 개발하기 시작했고, 결론적으로 React 생태계가 구축되었음.

사실, React를 쓰는 이유를 느끼기 위해서,  제일 좋은 방법은 html,css,js로만 홈페이지를 작성하고, React로 똑같은 홈페이지를 작성한 뒤 비교해보는 거라고 합니다. 그건 따로 제가 진행해보겠습니다. (귀찮은건 비밀)

---

Summary

세줄 요약

• 데이터와 화면(view)를 통일시켜주는 작업이 중요해졌습니다. 그걸 해결하기 위해서 , 데이터와 화면을 통일시켜주는 방법을 고안해낸 끝에, State관리, Rendering 등의 개념이 생겨나게 됩니다.
• 연속적인 사용자 경험을 주기 위해서, SPA형태를 채택함.
• 대용량 처리를 하기 위해 다양한 툴을 개발하기 시작했고, 결론적으로 React 생태계가 구축되었음.