React_1 : 리액트, 리액트 프로젝트 시작하기

현대에 들어서서 웹은 단순한 웹 페이지가 아니라, 웹 애플리케이션이다.
만일 개발한 화면이 사용자와의 Interaction이 별로 없다면, 사실상 프론트엔드 라이브러리가 필요하지는 않을것이다. 하지만, 프로젝트 규모가 커지고 다양한 유저 인터페이스와 Interaction을 제공하게 된다면, 많은 DOM 요소들을 직접 관리하고 코드를 정리하는것이 갈수록 힘든 일이 될것이다.

Front-End Library, FrameWork

Angular

주로 타입스크립트와 함께 사용됨.
라우터, HTTP 클라이언트 등 웹 프로젝트에서 필요한 대부분의 도구들이 프레임워크 안에 내장되어있음
앵귤러 1의 경우 만들어진지 꽤 오래됐고, 기업에서 사용이 많아 사용률이 높은편이다.
앵귤러 2의 경우 매우 성숙하긴 하지만, 인지도측면에선 아직 성장하는 단계이며, 주로 타입스크립트랑 함께 사용된다.

React

'컴포넌트' 라는 개념에 집중이 되어있음.
데이터를 넣으면 우리가 지정한 유저 인터페이스를 조립해서 보여주는 형태이다. 페이스북 개발자들이 라이브러리의 성능과 개발자 경험을 개선하기 위해 많은 연구를한다.
생태계가 넓고, 사용하는 곳도 많다.
HTTP 클라이언트, 라우터, 심화적 상태관리 등의 기능들이 내장되있지않다.
따로 공식 라이브러리가 있는 것이 아니라서, 개발자가 원하는 스택을 마음대로 골라서 사용 할 수 있다.

Vue

입문자가 사용하기에 쉬움. CDN에 있는 파일을 로딩하는 형태로 스크립트를 불러와서, 사용하기도 편하다.
HTML을 템플릿처럼 그대로 사용 할수도 있어서 마크업을 만들어주는 디자이너/퍼블리셔가 있는 경우 작업흐름이 매우 매끄럽다. 공식 라우터와 상태관리 라이브러리가 존재한다.

 

React

리액트가 만들어 진 배경

리액트가 만들어지기 전에도, Angular, Backbone, Knockout.js, Ember등 수많은 프로임워크들이 존재했다. 그리고 해당 프레임워크들은 데이터단을 담당하는 모델, 뷰, 컨트롤러로 이루어진 (MVC)패턴, 이에서 파생된 (MVVM), (MVW)등의 패턴들로 이루어져 잇었다.

위 프레임워크 모델들은 대부분 양방향 바인딩을 통하여 모델에 있는 값이 변하면, 뷰에서도 이를 변화시켜준다.
"일단 첫 화면을 보여주고, 변화에 다라 필요한 곳을 바꿔준다."

"변화(Mutation)"는 상당히 복잡한 작업이다. 특정 이벤트가 발생했을때, 모델에 변화를 일으키고, 변화를 일으킴에 따라 어떤 DOM을 가져와서 어떠한 방식으로 뷰를 업데이트 해줄 지 로직을 정해주어야 한다.
리엑트의 발상 -> 그냥 Mutation을 하지말자. 그 대신에, 데이터가 바뀌면 그냥 뷰를 날려버리고 새로 만들어버리면 어떨까?

하지만, DOM을 기반으로 작동하는 우베은 그때 그때 새로운 뷰를 만들어버리라고 하면 성능적으로 엄청난 문제가 있을것이다. -> Virtual DOM사용으로 보완

Virtual DOM : 가상의 DOM - React는 Virtual DOM을 성공적으로 사용한 선발주자이다.(Vue, Marko, Maquetee, Mithril등 에서 사용) 
변화가 일어나면, 실제로 브라우저의 DOM을 새로운 것을 넣는것이 아니라, JS로 이루어진 가상 DOM에 한번 렌더링을 하고, 기존의 DOM과 비교를 한 다음 정말 변화가 필요한 곳에 업데이트를 해주는것이다.
Virtual DOM을 사용함으로서, 데이터가 바뀌었을 때, 일단 바뀐 데이터로 그려놓고 비교를 한다음에, 바뀐 부분만 찾아서 바꾸어주는 형식이다!

리액트를 특별하게 만드는 점

1. 엄청난 생태계 -> JS및 JS라이브러리들도 리액트로 포팅되어 많이 작성되고 있다.
2. 사용하는 곳이 많다.
3. 재사용률이 높다.

---

create-react-app 설치 및 사용

create-react-app은 리액트 앱을 만들어주는 도구이다.

npm install -g create -react -app

yarn global add create-react-app

 

사용 - hello-react app프로젝트 생성

create -react -app hello-react