React에 대한 배경지식
지금까지 자바스크립트에서 배운 객체, class, prototype 등등은 결국 react를 배우기 위한 초석을 닦았던 것이다. 프론트앤드 개발자를 노린다면 Veu, Angular, React중 하나 이상을 해야지 취업이 가능하다는건 구글에서 프론트앤드 개발자 되는 법만 검색해도 주루룩 나올것이다. 춘추전국시대같은 프론트앤드 시장에서 그나마 지금까지 굳건한 1등을 지키는것은 바로 React이다.
1. React.js?
React는 Facebook에서 내부적으로 개발하여 2013년에 오픈소스로 런칭한 JavsScript의 라이브러리이다.
2. JavaScript Framework의 발전
사용자 경험면에서 PHP의 단점을 극복하고자 JavaScript에선 DOM 객체 및 Ajax를 통한 데이터 통신 및 데이터 바인딩을 할 수 있는 프레임워크들이 나오기 시작했다. 대표적인 예로 Angular js, Backbone js등이다. 하나의 페이지에서 리소스를 다룰 수 있는 SPA(Single Page Application)이 인기를 얻으면서 이러한 프레임워크들이 발전해가기 시작했다.
기본적인 개념은 데이터를 받아오고, 기존에 렌더링 되어있던 데이터들과의 비교를 통해서 전체 DOM 객체를
비동기적(Asynchronous)
어떤 작업을 요청했을 때 그 작업이 종료될때 까지 기다리지 않고 다른 작업을 하고 있다가, 요청했던 작업이 종료되면 그에 대한 추가 작업을 수행하는 방식
으로 갱신해 줌으로써 서버에서 직접 소스코드를 받아와 렌더링 해줌으로, 리프레시가 되는 부분들 없이 사용자 경험적으로 더 좋고 부드러운 UX를 제공해 줄 수 있게 되었다.
3. 왜 React?
React는 철저한 뷰 라이브러리다. 기존의 JavaScript, 예를들어 Angular js가 MVC 형태를 모두 갖추고 있는 프레임워크라면 React는 철저하게 view단에만 집중한다.(프레임워크라기 보다 라이브러리 성격이 강함)
이는 오로지 DOM 객체의 갱신 및 이벤트 응답에만 관심이 있는 라이브러리라고 볼 수 있다.
4. React의 특징
React는 Angular js 등 에서 가지고 있는 view모델과는 다르게, DOM 업데이트를 효과적으로 처리할 수 있는 특징을 가지고 있다
1) JSX
2) 단방향 데이터 흐름
3) Virtual DOM
1) JSX(JavaScript XML)
JSX는 HTML과 유사한 문법을 보이고, React 컴포넌트에서 사용할 마크업을 작성하기 위한 문법체계로 사용한다. js에서 append 등의 DOM을 조작할 때, 여러 줄을 작성하게 되면, 문자열로 HTML 마크업 + 다음줄 같은 복잡한 방식으로 개발했던 때가 생각난다(...)
React는 JSX를 사용함으로써, 문자열 형식으로 HTML 마크업을 표현하는 복잡한 방식이 아니라 HTML 마크업 그대로를 사용한다. 따라서 문자열로 바꾸거나 할 필요 없이 Javascript + HTML마크업을 사용하면 되는것이다.
2) 단방향 데이터 흐름
React는 기타 JavaScript framework와 다르게 데이터 흐름이 단방향으로 이루어져 있다.
Angular js를 살펴보면, 데이터의 변경을 framework에서 감지하고 있다가, 변경되는 시점에 DOM객체에 렌더링 해주거나, 페이지 내에서의 모델의 변경을 감지하여 JavaScrip 실행부에서 변경하는 등의 양방향 데이터 바인딩을 가지고 있다.
양방형 데이터 바인딩은 코드의 사용면에서 코드량을 크게 줄여주는 등의 장점이 있지만, 자체 실행 코드 내에서 데이터의 변화를 감지하여 DOM객체 전체를 렌더링 해주거나, 데이터를 바꿔주는 등의 실행으로 성능이 감소되는 비효율성이 생긴다.
React는 이러한 양뱡향 바인딩이 아니기 때문에 실행부 자체 내에서 데이터의 변화를 감지하지 않으며, 데이터에 변화가 오게 되면, 특정 함수를 실행시킴으로써 DOM 객체를 갱신한다. 따라서 성능에 관련되어 데이터 변화에 따른 성능 저하 없이 효율적으로 DOM 객체를 갱신해 줄 수 있는 장점이 있다.
3) VIRTUAL DOM
JavaScript MVC framework는 DOM 객체 자체에서 데이터 변화를 감지하고 DOM 객체를 수정하여 갱신한다. 이는 브라우저 내의 리소스를 사용하기 때문에 DOM 객체 갱신에 성능 저하가 일어날 수 밖에 없다.
React는 자체 실행 엔진에서 메모리상에 가상의 DOM객체를 생성하고, 단방향 데이터 흐름으로 인한 데이터 변경에 관련된 DOM 객체만 부분적으로 변경해주는 효율적인 알고리즘 체계를 가지고 있다. 따라서 브라우저 DOM 자체 내의 리소스를 사용하지 않고도 효율적으로 DOM을 갱신할 수 있는 장점을 가지고 있다.
결론
React는 뷰 컴포넌트 라이브러리이기 때문에 다양한 MVC framfework에도 활용할 수 있다. 이러한 React의 특징은 빠르고 효율적이기 때문에 많은 사람들이 React를 사랑할 수 밖에 없다.
리액트가 인기 있는 이유
- 어마어마한 생태계
: 사용하는 사람들이 많기 때문에 그에 따른 다양한 라이브러리가 쏟아져 나옴 - 사용하는 곳이 많다
: 에어비앤비, facebook, 야후.. 등등 - 한 번 사용하면 좋아하게 된다!
출처 : https://trustyoo86.github.io/react/2017/11/18/what-is-react.html
React설치
React공식사이트에 접속을 하고 시작하기를 눌러보자.
필자는 영어에 능숙하지 않기 때문에 우측 상단 nav의 rangauages를 한국어로 변경한 상태로 설치를 진행했다. 영어를 잘 몰라도 공식 사이트를 잘 활용할 수 있다(번역이 매끄러움)
https://ko.reactjs.org/docs/create-a-new-react-app.html#create-react-app
자 이 사이트에 접속을 하면
위같은 페이지가 뜰 것이다. create-reate-app의 설명을 확인할 수 있다. 여기서 Create React App 을 클릭해보자. github페이지가 뜰것이다.
Create-React-App Github
설치방법
공식 github에서 추천하는 방법
하지만 필자는 npx로 하는게 귀찮기 때문에 npm으로 설치했다.
npx create-react-app my-app
cd my-app
npm start
npm과 npx의 차이
- npm : 프로그램을 말 그대로 ‘설치'
- npx : 임시로 설치해서 딱 한번만 실행시키고 지우는 것을 반복
장점 : 가볍다, 항상 최신버전 유지
MAC OS 기준 설치방법
1) node js설치 (안정적인 LTS버전을 추천)
2) iTerm 실행
3) react를 설치할 폴더 만들기
4) 콘솔창에 cd 치고 폴더를 콘솔창에 끌어와서 React설치할 폴더 경로 설정
5)sudo npm install -g create-react-app
(-g 글로벌로 설치할것이기 때문에 sudo로 권한 부여해준다)
6) 설치가 끝나면 에디터에서 폴더를 열어준다 (필자는 VSCode를 추천하는데, 자체 터미널을 사용할 수 있기 때문)
7) VSCode 터미널에npm start
8)http://localhost:3000/url로 웹사이트가 뜨면 성공!
