[React] 리액트의 정체를 알아보자! 리액트 란

프레임워크

현재 가장 주목 받고 있는 프레임워크는 리액트(React), 앵귤러(angular), 뷰JS(vue.js)이며 리액트는 가장 많이 사용하며, 앵귤러는 화면 출력, 형상 관리부터 배포까지 많은 기능을 포함한 완성형 프레임워크이다. vue.js는 가장 나중에 나온 프레임워크이며 다른 프레임워크의 장점은 흡수, 단점은 보완한 프레임워크이다.

 

리액트

• 리액트는 페이스북을 개발할 때 사용한 기술이며, 공개 SW이다.
• 리액트의 가장 큰 특징은 '화면 출력에 특화된 프레임워크'라는 것이다.
• 리액트는 컴포넌트(Component)라는 작고 독립적인 코드 블록을 조합하여 빠르고 효율적으로 화면을 구성합니다.
  • 컴포넌트는 '레고블럭' 이라고 쉽게 이해가능하다.
• 화면 출력 속도가 빠릅니다.
  • 기존의 자바스크립트에서 화면을 구현하는 제이쿼리나 핸들바 같은 경우는 한 부분을 수정하면 전체가 수정되어 화면의 구현속도가 현저히 느려집니다.
  • 그에반해 리액트는 '게임 엔진 원리'를 도입하여 다음에 나타날 필요할 화면을 미리 구현해뒀습니다. 따라서 다음에 나타날 화면의 일부(노드)를 미리 그려놓고 변경된 화면의 일부(노드)만 수정하는 가상화면(Virtual Dom)기술을 만들었습니다. 

노드 패키지 매니저(npm)

• 자바스크립트 라이브러리는 노드 패키지 매니저라느 프로그램으로 관리합니다. 
• npm은 https://www.npmjs.com에서 서 필요한 라이브러리를 내려받아 설치하고 삭제하는 등의 관리를 해주는 프로그램
• npm은 실제로 node_modules 폴더에 라이브러리를 내려 받아 저장하고 package.json이라는 파일에 설치된 라이브러리의 정보를 적어 저장합니다. 
  • 실제 라이브러리와 라이브러리 명세 파일을 따로 관리하는 것
  • 라이브러리 명세 파일을 따로 관리하는 이유는 node_modules에 저장되는 라이브러리의 용량이 굉장히 크기 때문이다. (경우에 따라 1GB를 넘기도 한다) 
  • A개발자가 B개발자에게 프로젝트를 공유할 때 용량이 큰 라이브러리까지 전송할 필요 없이 라이브러리 명세와 핵심코드만 전다랗면 됩니다. 그러면 개발자 B는 package.json의 모록을 이용하여 손쉽게 라이브러리를 내려받을 수 있습니다.
• yarn : npm의 단점을 보완하여 성능과 속도를 개선한 라이브러리 관리 도구

웹팩(WebPack)

• 웹팩은 프로젝트에 사용된 파일을 분석하여 기존 웹 문서 파일로 변환하는 도구
• 중간에 파일을 해석하는 역할 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Redux : React Native를 개발하는데 좋은 아키텍쳐 패턴

 

Reactive 

• 리엑티브 (Reactive eXtension) = RX)
• MicroSoft가 창안한 개념으로 데이터의 흐름에 따른 변화를만드는 비동기적 프로그래밍 패러다임.
• 기본 실행 모델이 데이터의 흐름들 통해 자동으로 전파하는 것
• RX패러다임은 다양한 개발언어로 확장됨
  • RxAndroid, RxJava, ReactiveCocoa, React Native...
• Reactive -> (facebook) ->React, Flux design petten
• React -> React native
• Flux design petten -> Redux design petten

•  RxAndroid : 사운드클라우드(SoundCloud)의 마티아스 캐플러스와 안드로이드 씬의 영웅 스퀘어의 제이크 와튼(Jake Wharton) 중심으로 만들어진..
•  RxJava : 넷플릭스가 주축이 되어 자바에 포팅한..
•  ReactiveCocoa : 깃헙(GitHub)과 페이스북(Facebook) 엔지니어들이 중심이 되어 이끌어 나가고 있다고 하나요..* React : 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 이죠~. 페이스북과 인스타그램 소속 개발자들이 만들고 있으며, 2013년 처음 공개됬죠...
•  React Native (리엑트 네이티브)는 리액트의 접근 방법을 모바일로 확장하는 페이스북의 오픈소스 프로젝트 입니다...그 외.....

 

Flux