[모던 리액트 Deep Dive] React의 역사

 

들어가며..

 

React를 선호하는 이유

 

• 명시적 상태 변경
  • 리액트는 단방향 바인딩만 지원함. 단방향 바인딩이랑 데이터가 한쪽으로만 흐른다는 의미.
  • 이와 반대되는 말은 양방향 바인딩인데, 뷰와 컴포넌트가 서로에게 영향을 줄 수 있는 것. 양방향 바인딩도 분명 장점이 있지만 코드의 크기가 커지면 관리가 쉽지 않다.
  • 리액트는 단방향으로 그리고 명시적으로 이뤄지기 때문에 상태 변화를 명시적으로 일으킨 함수만 찾으면 된다.
• JSX(JavaScript XML)
  • HTML과 JavaScript가 섞여들어간 형태로 고유의 몇가지 특징만 이해하면 손쉽게 JSX 코드 구현 가능.

 

React의 역사

 

2000년대

• LAMP 생태계. (Linux, Apache WebServer, MySQL, PHP)
• DB에서 데이터 loading.
• 웹 서버에서 HTML 생성하여 클라이언트에 전달.
• 자바스크립트는 폼 처리.
• 웹 브라우저의 역할이 매우 제한적.

 

2010년대

• 웹 로컬 스토리지, 제이쿼리, 웹 소켓, ES5 등의 등장.
• 웹 브라우저의 역할이 확대.
• 자바스크립트로 DOM 수정하고 AJAX로 클라이언트가 서버와 직접 통신.

 

현 메타, 전 페북이 자바스크립트의 코드 양은 줄이면서 실시간 성은 유지하고자 하였지만, 거의 불가능!

 

당시 Bolt.js라는 것이 떴고, 실패..

 

Function Bolt라는 함수형 기반이 나왔고 이것이 React의 모태가 됨.

이전에는 App과 프레임워크가 양방향 관계였기에 DOM에서 어떤 점이 변경되었는 지 추적이 어려웠음.

그러나 단방향 관계가 되며, 이전 DOM을 아예 버리고 새롭게 렌더링 하는 방법이 떠오름!

 

초반, React에 거부감을 가지고 있는 사람들이 많았다.

가장 큰 이유가 관심사의 분리가 되지 않는다는 점!

 

*관심사의 분리: HTML, CSS, JavaScript 코드는 각각 따로 파일 상에 위치해야한다! 라는 논리.

 

그러나 관점을 달리 보면, React는 Component 기반으로 파일이 분리 되어 있기 떄문에 관심사의 분리에 해당한다!!

 

이후 넷플릭스도 웹 UI를 React로 개발하면서, 사람들이 React에 대한 신뢰가 올라가게 되며 현재 프론트 계의 왕으로 자리 잡음!!

 

리액트의 장점

• 자바스크립트 코드 크기가 줄어듬 (상태에 따른 UI를 선언적으로 구현)
• 완만한 학습 곡선
• 빠른 기능 추가

Next.js: 리액트 기반의 서버사이드 랜더링 프레임웤.

 

* 프론트 엔드 개발자도 React 계속 쓸거면, Node.js 공부하는 게 기본 소양이 될것임! (Node도 공부해야겠넴;;;)