1. React란? 앞으로 공부전략 그리고 React 설치하기

 

React란

페이스북 회사에서 페이스북의 UI를 더 잘 만들기 위해서 만든, 웹/앱(RN)의 View를 개발할 수 있도록 하는 자바스크립트 UI 라이브러리이다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다. 컴포넌트에 데이터를 흘려보내면 설계된 대로 UI가 조립되어 사용자에게 보여진다.

 

왜 React를 사용하는가?

요즘은 pc웹페이지 하나만 사용하지 않는다. 안드로이드 어플리케이션, 맥 어플리케이션, pc 웹사이트, 모바일 웹사이트 사이트가 출력되는 곳? 기기가 다양하다. 이러니 웹사이트가 동적으로 움직여줘야 한다. 이런 웹 어플리케이션에서 UI를 동적으로 나타내기 위해서는 복잡하고 많은 상태를 관리해야 하는 부담이 생긴다. 특히나 프로젝트 규모가 커질수록, UI 기능이 많을 수록 DOM요소 하나하나를 직접 관리하고 코드의 리팩토링도 힘들어 질 것이다. React는 컴포넌트를 이용하여 가독성 향상, 재사용성 증가를 끌어내어 개발자가 UI 기능과 구현에 집중할 수 있게 해주고 Virtual DOM을 이용해 브라우저 전체를 업데이트 할 필요없이 바뀐 일정부분만 업데이트가 가능하게 해준다.

Virtual DOM?

DOM은 원본 HTML 문서의 객체 기반 표현 방식이다. 기능이 많은 SPA(Single Page Application)일수록 돔을 건드리는 일이 많이 발생하는데 그 때마다 브라우저는 연산을하고 서버와 통신을 해야 한다. 이 과정에서 우리는 새로고침효과를 볼 수 있는 것. 하지만 가상 돔을 이용용하면 실제 DOM에 적용시키기 전에 가상의 DOM을 만들어 적용시킨 다음 완성된 결과만을 실제 DOM으로 전달한다. 이를 통해 브라우저가 진행하는 연산의 양을 줄일 수 있어 성능이 개선된다. 또 가산 돔은 렌더링도 되지 않기 때문에 연산 비용이 적다.

 

특징

• Component 기반 구조: 예를 들어 index.html가 있다고 가정하자. React는 이 index를 top, side bar, main, bottom 등의 컴포넌트로 세분화 하고 이 세분화된 작은 컴포넌트들을 개발자가 조립하여 화면을 구성한다. 코드가 재사용될 때마다 반복해서 입력할 필요없이 불러?오기만 하면 되고, 긴 코드들이 컴포넌트의 이름으로 대체되니 가독성이 향상된다. 객체관리와 비슷한 맥락으로 이렇게 쪼개어 놨으니 코드의 유지보수가 용이해진다.
• Flux 패턴과 단방향 데이터 바인딩: React는 양방향 바인딩이 전제되는 MVC 패턴과는 다른 특징을 보인다. 페이스북에서는 Flux라고 불리는 단방향 바인딩을 특징으로 가지고 있는 패턴을 새로 만들어냈다 MVC중 View에 집중한 형태로 스토어에서 데이터를 가져오고 이 데이터를 자식 view로 전달하는 역할을 한다. (view-controller와 가깝다.)
• 프레임워크가 아닌 라이브러리: 프레임워크는 프레임워크가 개발자를 조정한다면 라이브러리는 개발자가 라이브러리를 조정할 수 있다. 그만큼 높은 자유도가 보장된다. 많이 언급되는 Vue나 Angular는 프레임워크이다.

 

앞으로의 공부방식

생활코딩-React 강의를 보며 공부를 할 예정이고 나오는 개념들은 티스토리에 정리하겠다. 생활코딩에서는 세 가지 요소에 집중해서 배울 것으로 예상된다.

1. Coding: 개발환경을 세팅하고 어디의 코드를 바꿔야 하는가
2. Run: 1번에서 작성한 것을 실행해서 결과를 보는 것
3. Deploy: 1번과 2번을 반복해서 만든 결과물을 고객(사용자)에게 전달하는 것

 

설치

우선 내 환경은 mac os이고 웹페이지에서 React앱을 사용하지 않고 create a new react app으로 사용할 것이다.

 

1. 해당 페이지를 읽어보면 node.js와 npm이 필요함을 알 수 있다. => node.js 다운로드

ko.reactjs.org/docs/create-a-new-react-app.html#create-react-app

새로운 React 앱 만들기 – React

 

2. npm으로 리액트 앱 만들기

npm install -g create-react-app

혹시 에러가 난다면 수도로 다시

sudo npm install create-react-app

마지막에 이렇게 리액트 앱 버전이 떴다면 성공

+ create-react-app@4.0.1 

 

3. 폴더 생성하고 그 폴더에 리액트에 필요한 것들 다운받아주기.

 

나는 내 컴퓨터에 react-app이라는 폴더를 만들어줬다. 그 폴더로 자원들을 다운받아야 하므로 cd로 디렉토리 이동.

cd /Users/yuni/react-app 

리액트앱을 만들어주면 되는데... 

create-react-app .

 

이런오류가 뜬다.

(base) eom-yunjuui-MacBookPro:react-app yuni$ create-react-app .
-bash: create-react-app: command not found

이고잉님이 그런말을 했다. npm이 아닌 npx를 페이스북에서 권장한다고. 그래서 npx로 했더니 된다.

npx create-react-app .

 

4. 해피 해킹 끝!

 

5. VS CODE를 사용한다고 한다. 하니 VS CODE 다운로드

 

 

 

 

 

---

참고

 

 

https://geonlee.tistory.com/31

ko.reactjs.org/

valuefactory.tistory.com/544

생활코딩 - React 1~5강

 www.youtube.com/watch?v=XMb0w3KMw00&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi