React(0) 리액트와 리액트 네이티브 개념 정리

목차

1. 리액트에 대해

   1) 리액트는 어쩌다가 만들어졌을까?

   2) 리액트의 특징

2. 리액트 네이티브에 대해

3. FE 프레임 워크들 비교

   1) 성능 비교

   2) 관심도 비교

   3) 러닝 커브

---

리액트에 대해

- React는 페이스북이 만든 UI Component를 만들기 위한 자바스크립트 라이브러리이다.

 

리액트는 어쩌다가 만들어졌을까?

- JavaScript를 사용하여 HTML를 제어를 한다고 하면, DOM을 변형시키기 위하여,
DOM Selector API 를 사용해서 특정 DOM 을 선택한뒤, 특정 이벤트가 발생하면 변화를 주도록 설정해야된다.

(html에 class나 id를 설정하고, JS에서 getElementById로 원하는 이벤트가 발생하면 DOM을 바꿔준다.)

※ DOM (문서 객체 모델)이란?
HTML을 TV에, DOM을 리모컨에 비유할 수 있겠다.
그저 텍스트인 HTML을, DOM이라는 트리구조의 객체로 변환시켜서,
이를 읽는 브라우저와 Javascript가 이해할 수 있는 구조로 HTML parser가 DOM으로 바꿔주는 것 이다❗️
(Dom != JS 이다. 현재 웹 브라우저에서 DOM을 조작하는 언어는 자바스크립트 뿐이라 생긴 오해)

사용자와의 인터랙션이 별로 없는 웹페이지라면 상관없겠지만, 만약에 인터랙션이 자주 발생하고, 이에 따라 동적으로 UI 를 표현해야된다면, 이러한 규칙이 정말 다양해질것이고, 그러면 관리하기도 힘들어질 것 이다.

따라서 앱의 규모가 커질수록 복잡도가 높아지기 때문에, 기본적으로 DOM을 직접적으로 조작하는 jQuery와 같은 라이브러리가 legacy(옛날 코드) 취급을 받는 것 이다 !으잉 쯧.

과장을 조금 하자면, 이렇게 될 것 이다!!

따라서, 변화가 일어났으면, 변화된 버전을 가상돔으로 바꾸고, 가상 돔끼리 비교해(diffing이라는 기술), 바뀐 부분만 실제 돔에 적용을 함으로써, 레이아웃 계산은 한번 이행되는 시스템을 만들어 보자! 라는 아이디어로 시작하게된 리액트 이다.

리액트가 가상돔을 반영하는 절차를 보여주는 사진

리액트가 가상돔을 반영하는 절차를 보여주는 또 다른 사진

 

- 정리하자면, 리액트가 탄생하게된 배경은 이러하다.

-> Dom을 직접 건드리는 작업은 번거롭다!
-> Dom을 전부 날려버리고 다시 만들어서 보여주면 업데이트할 때 되게 편하겠다!
-> 하지만 이렇게 하면 속도가 굉장히 느릴 것 같네.
-> 메모리에 Virtual DOM(가상 DOM)을 만들어, 컴포넌트가 렌더링 될 때마다 기존 Virtual DOM(가상 DOM)트리를 비교해, 다른 부분을 감지해서 변경된 부분만 바꾼다!
-> 성능 개선 완료. >__<
- 그 당시 프론트엔드 프레임워크들을 속도로 압도했었더랬더랬다.
(지금은 Angular, React, Vue의 성능, 속도 차이는 미미함.)

 

---

 

리액트의 특징

- 리액트는 MVC 패턴에서 ‘V(View)’에만 집중하고 있다.

· MVC는 Model, View, Controller의 약자이다.
· 하나의 프로젝트를 구성할 때, 널리 사용되는 소프트웨어 디자인 패턴이다. 그 구성요소를 세가지의 역할로 구분한 패턴이다.
· Model은 애플리케이션의 정보, 데이터를 나타낸다.
· View는 데이터를 기반으로 사용자들이 볼 수 있는 화면이다.
· Controller는 데이터와 사용자인터페이스 요소들을 잇는 다리역할과, 이벤트를 처리하는 역할을 한다

- 라우팅(페이지 이동)에는 react-router-dom, Ajax통신에는 axios, use-http나 fetch, 상태 관리에는 redux나 MobX, 테스트에는 jest, mocha, eslint, 빌드에는 webpack, npm 등 의 라이브러리를 사용하면 된다.
- 이 점이, 각 라이브러리의 특성을 학습해야 하는 것이 단점이라고 생각 할 수 도 있지만, 유연성 측면에서는 장점일 수 있다. 

- 다른 기타 기능들은 직접 구현하여 사용해야 한다.

 

---

 

- 리액트에서는 JSX라는 독특한 문법을 가지고 있다.
- JSX는 자바스크립트와 HTML을 동시에 사용하며, HTML에 자바스크립트의 변수들을 바로 사용할 수 있는 일종의

템플릿 언어(Template language)이다.

const App = () => {
  const hello = 'Hello world!';
  return <div>{hello}</div>;
};

- 리액트는 위와 같이 자바스크립트에서 HTML 태그를 사용할 수 있으며,
자바스크립트 변수를 HTML 태그에서 바로 호출하여 사용할 수 있다.

 

---

- 객체 지향 프로그래밍 개념을 도입하여서 화면 UI 컴포넌트를 캡슐화 하였다.

- 컴포넌트라는 파일의 함수를 저장해놓고, import 하여 필요한 영역에 배치하는 느낌이다.

- 따라서, 간단하게 수정하고 재사용할 수 있어, 개발 생산성에 장점이 있다.

# 코드 예시
const Title = () => {
  return <h1>Hello world</h1>;
};

const Button = () => {
  return <button>This is a Button</button>;
};

const App = () => {
  return (
    <div>
      <Title />
      <Button />
    </div>
  );
};

Title과 Button이라는 컴포넌트들을 선언 후, 사용하여 UI를 구성한다. (저러한 컴포넌트들을 따로 파일로 빼서, main에서 import해서 쓸 수 있다.)

- 컴포넌트에는 함수형 컴포넌트와 클래스형 컴포넌트가 있는데,

컴포넌트가 다른 컴포넌트와 상호작용하거나 작업할 필요가 없다고 확신할 경우에만 함수 컴포넌트를 사용한다는걸 인지하자.

컴포넌트에 대한 부가설명 필요

 

---

-  리액트는 단방향 데이터 흐름 (one-way data flow)라는 특징을 갖고 있다. 다른 말로 단방향 바인딩이라고도 하는 이 특징은,
데이터가 Tree구조에서, 위 -> 아래, 부모 -> 자식의 방향으로만 흐른다는 것을 의미한다.

※ 여기서 데이터 바인딩이란?
- 두 데이터 혹은 정보의 소스를 일치시키는 기법으로, 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터(여러개의 자바스크립트 객체)를 일치시키는 것을 말한다.
※ 양방향 바인딩
- 장점 : 코드의 사용면에서 코드량을 크게 줄여준다.
- 장점 : 웹 애플리케이션의 복잡도가 증가하면 증가할수록 빛을 발한다.
- 단점 : 변화에 따라 DOM 객체 전체를 렌더링해주거나 데이터를 바꿔주므로, 성능이 감소되는 경우가 있다.
ex) 컨트롤러에서 model이 변경됨 -> view변경됨 
view에서 scope model이 변경됨 -> 컨트롤러에서 model이 변경됨
- 데이터의 변화를 감지해 템플릿과 결합해 화면을 갱신, 화면의 입력에 따라 데이터를 갱신하는 것이다. (HTML -> JS, JS -> HTML 양쪽 모두 가능)
※ 단방향 바인딩
- 장점 : 데이터 변화에 따른 성능 저하 없이 DOM 객체 갱신 가능하다.
- 장점 : 데이터 흐름이 단방향(부모->하위 컴포넌트)이라, 코드를 이해하기 쉽고 데이터 추적과 디버깅이 쉽다.
- 단점: 변화를 감지하고 화면을 업데이트 하는 코드를 매번 작성해야 함
- 데이터와 템플릿을 결합해 화면을 생성하는 것이다. (JS -> HTML만 가능)

- 따라서, 자식이 부모의 데이터를 바꿔주기 위해서, 또한, 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해서,
state라는 개념을 사용한다.

또한, 컴포넌트 간 데이터를 전달하는 방법으로, Props라는 개념을 사용하는데,
이는, 부모 컴포넌트에서 자식 컴포넌트로 전달되며, 자식 컴포넌트는 Props를 객체 타입으로 받아서, 화면을 렌더링하거나 로직을 처리하는 데 사용할 수 있다.

"코딩애플 - 1:45 / 8:25 React 입문자들이 알아야할 Redux 쉽게설명 (8분컷)" 중

- 약간의 비약을 섞어 간단히 말하자면, state는 변수라고 생각하자면, props는 그러한 변수들을 자식노드에서 사용하기 위해 인자화하여 전송을 해주는 거라고 보면 쉽다.

전체적인 리액트 개발 과정

---

React는 다음과 같은 경우에 리렌더링(화면에서의 데이터 값들을 갱신)이 일어난다.
1. Props가 변경되었을 때.
2. State가 변경되었을 때.
3. forceUpdate() 를 실행하였을 때.
4. 부모 컴포넌트가 렌더링되었을 때.

 

훌륭한 리액트 개발자의 조건
1) 컴포넌트에 대한 뛰어난 의사 결정
Component 를 얼마나 작은 단위로 쪼갤 것인지, 어떻게 재사용 가능한 컴포넌트를 만들 것인지 아는 개발자
2) state가 존재하는 위치에 대한 의사 결정
state 는 Virtual DOM 내에 여러 곳에 존재할 수 있는데, 이를 어디에 위치시킬지 아는 개발자
3) state가 변경될 때, 컴포넌트에 어떤 변화를 줄 것인지에 대한 의사 결정
state 가 변경되었을 때, 어떤 부분이 re-rendering 되어야 하는지 아는 개발자

---

이렇게, 리액트로 멋진 웹사이트를 만들고 나면, 앱으로도 발행하고 싶어진다. 따라서, 리액트 네이티브에 대해서 알아보자.

리액트 네이티브에 대해

- "안드로이드와 IOS의 프론트엔드를 각각 만들려면 오래 걸리니깐, 하나의 코드로 두개의 플랫폼을 다룰 수 있게 하자!"
라고 해서, 페이스북에서 나온 크로스 플랫폼 라이브러리 (이를 한번 더 감싼 프레임워크가 Expo)(라이브러리임!)

- 애플리케이션을 개발한다고 한다면 Android는 Kotlin과 Java, IOS는 Objective-C와 Swift라는 언어로 개발하는 것이 일반적이다. 일반적인 언어들로 개발하는 것은 각각의 OS에 최적화되어 있다.

- 하지만 각각의 언어로 개발하기 위해선 개발자들은 두 가지 언어와 OS를 모두 이해해야 한다. 심지어 웹사이트도 만든다고 하면, 개발자도 필요하고 유지보수하는 비용도 많아진다. 따라서 이를 해결하기 위해 등장한 것이 하이브리드 (웹)앱이다.

네이티브 앱(Native APP)
- 우리가 흔히 아는 안드로이드나 IOS 용으로 나눠서 만들어진 앱으로 각각의 플랫폼에서 제공하는 언어를 이용해서 만들어진 앱이다.
- 대표적인 네이티브 앱으로는 카카오톡, 유튜브, 인스타그램 등이 있다. (안드로이드용 앱 & IOS용 앱)
- 장점 1 : 모바일 기기에 최적화된 언어로 개발되어 반응 속도가 빠르고 안정적이다.
- 장점 2 : 카메라, 음성인식과 같은 스마트폰 기능과 2D, 3D 등의 기능도 활용할 수 있다.
- 단점 1 : 안드로이드와 IOS 용 앱을 각각 따로 개발을 해야 하기 때문에 시간과 비용이 많이 들고 개발 난이도가 높다.
- 작동하는 기기에 최적화된 형태로 개발되기 때문에, 카메라나 GPS, 블루투스 등 기기 내 장치들을 세밀히 다루거나, 영상 편집 앱과 같이 성능을 최대한 사용해야 하는 앱은 네이티브 앱으로 만드는 것이 좋다.

웹 앱(Web APP) - 모바일 앱의 모습을 한 웹사이트
- 웹 앱은 네이티브 앱과 다르게 PC에서 접속하는 웹페이지를 스마트폰 화면 사이즈로 줄여서 만든 모바일 웹이다.
- 실제로는 웹 방식이지만 마치 앱을 사용하는 것처럼 보이게 한다.
- 장점 1 : 웹페이지만 제작하면 완성되기 때문에 시간과 비용이 적게 들어간다.
- 장점 2 : PC, 스마트폰 등 기기의 종류와 상관없이 모든 기기에서 같은 페이지를 볼 수 있다.
- 장점 3 : 별도의 설치가 필요 없기 때문에 네이티브 앱에 비해 유지 보수가 쉬운 편이다.
- 단점 1 : 웹용 언어로만 제작하기 때문에 카메라, 음성 검색과 같은 스마트폰 기능을 사용할 수 없다.
- 앱을 다운로드해서 기능을 실행하는 것이 아니기 때문에 검색이나 주소 입력 등의 과정을 거쳐야 한다.
- 애플 앱스토어에서는 거절 대상으로 등록 및 판매를 할 수가 없다.

하이브리드 앱(Hybrid APP)
- 이름에서 알 수 있듯이, 네이티브 앱과 웹앱의 장점을 합친 앱이다. 기본 기능은 HTML 등의 웹 표준 기술을 기반으로 구현하고, 앱을 만든 후 최종 앱 배포에 필요한 패키징 처리만 아이폰, 안드로이드 등 모바일 운영체제 별로 구현하는 앱이다.
- 네이티브 앱으로 보이지만 실제로는, 네이티브 웹 위에 웹 뷰(Web View)를 사용해 웹을 띄우는 방식으로 구현된다.
- 대표적으로 크롬, 네이버, 다음을 구글 스토어에서 다운받은 앱들이, 하이브리드 형태로 개발된 앱이다.
- 장점 1 : 모바일 웹과 기존 네이티브 앱의 장점을 모두 가지고 있다.
- 장점 2 : HTML로 개발되기 때문에 비용과 시간이 적게 들고 업데이트 및 유지 보수가 편하다.
- 장점 3 : 네이티브 API와 브라우저 API를 이용해서 다양하게 개발할 수 있고, 한 번의 개발로 다수의 플랫폼에 유연하게 대처가 가능하다.
- 단점 1 : 네이티브 앱 보다 UI를 디자인이 취약한 편이다.

 

그래서 결론적으로, 리액트 네이티브를 쓰면 좋은 경우는,

①리액트로 웹 사이트 개발을 해놓았는데,
음.. ②모바일 앱으로도 만들어 놓으면 좋을 것 같다!
으음.. ③내 웹(앱)은 그렇게 많은 기능이 필요하진 않은 것 같은데?

이겠다.

 

---

 

웹 앱을 쉽게 만들 수 있는 Front End 프레임워크로는 리액트/Angular/Svelte/Vue/Preact가 있는데, 제일 점유율이 높은, 리액트를 포스팅하게 된 이유를 말하고자 한다

FE 프레임 워크들 비교

종류

※ 웹 프론트엔드는 CSR(Client-side Rendering)이 일반화 되었다.
이는 SPA(Single Page Application) 기법을 사용하여 페이지를 렌더링 하는데, 이러한 것을 지원해주는 것 중 하나가 리액트이다.

 - 리액트 : 리액트는 페이스북이 개발했으며 2013년 출시 되었다. 공식 문서에도 나와있듯이 프레임워크가 아닌 라이브러리이다. 따라서 추가적으로 필요한 것이 있을 경우 별도로 라이브러리를 설치하여 사용하게된다. 
 
 - 뷰 : 에반 유(Evan You)가 2014년 개발한 프레임워크이다. 라이브러리를 거의 고민할 필요가 없다. 상태관리 또한 vuex를 쓰게된다. 게다가 2020년 뷰3 의 등장과 함께 타입스크립트 지원이 강해지며 인기가 올라가고 있다.
 
 - 앵귤러 : 구글이 개발한 프레임워크로 2010년 출시되었다. 가장 먼저 타입스크립트를 도입하였고,  뷰 이상으로 모든 기능을 포함한 전체 프레임워크 세트를 제공하여 무겁다. 현재는 이전 버전을 AngularJS(Angular1)로 두고, Angular(Angular2+)로 계속 버전 업데이트가 이루어지고 있다.
 
 - 스벨트 : Rich Harris가 만들었고, 가장 늦은 2016년에 첫 배포가 이루어졌다. 놀랍게도 스벨트는 프레임워크도 아니고 라이브러리도 아닌 컴파일러이다.  빌드 시에 자체적으로 컴파일러가 돌며 번들파일에 코드를 담는다. 이 때 내 코드에서 사용하는 라이브러리의 부분만을 가져와 자체적으로 트리 쉐이킹을 한다.

3대 프레임워크 비교

 

---

 

성능비교

Performance (points 0-100)- higher is better (출처:medium.com)

 

---

 

관심도 비교

NPM(Node.js 모듈 패키지 라이브러리)의 사용량을 찾아볼 수 있는 &ldquo;npm trends&rdquo;

 

---

 

러닝커브

 - 리액트 : 리액트는 공식 문서가 편하다. 공식 가이드만 따라하더라도 핵심 기능을 배우는 데에 얼마 걸리지 않는다는 것을 알 수 있다. 하지만 개발에서 여러 기능들을 넣기 위해 다른 라이브러리를 공부해야한다는 단점이 있다. 하지만 이 또한 자유이고 커뮤니티가 활발하므로 어렵다고는 할 수 없다.
 
 - 뷰 :  뷰는 프레임워크로써 대부분의 기능을 제공하며, 높은 사용자 정의 기능까지 있어서 학습이 쉽다. template, script, style로 구성된 싱글 파일 컴포넌트는 html, js, css 방식과 거의 유사하다. 커뮤니티가 작지만 빠르게 성장하고 있으며, 사용하기 쉬워서 빠른 개발이 필요한 스타트업에 유용하다.
 
 - 앵귤러 : 구글이라는 거대 기업의 지원을 받고 있는 프레임워크이다. 체계적으로 문서가 되어있지만 타입스크립트를 학습해야하고, 뷰에 비해 더 많은 기능을 제공하고 있어서 러닝커브가 높은 편이다. 
 
 - 스벨트 : 리액트와 마찬가지로 모든 기능을 갖고 있지는 않다. 하지만 보다 쉽고 적은 코드를 작성하므로 훨씬 쉽다. 아래는 Hello 를 보여주는 리액트 컴포넌트이다.

 

---

 

리액트의 장점 :

1. Single Page Application 만들 수 있다 : 모바일앱으로 발행이 쉬움 (Angular, Vue도 가능하다. 리액트만의 장점이 아님)

* SPA(Single Page Application)
- 유저의 행동흐름에 따라서 동적으로 화면을 보여주기 위해 사용한다.
- SPA는 기본적으로 단일 페이지이다. 따라서 기존의 서버 사이드 렌더링에 비해 배포가 쉽고, 모바일 앱과 같은 UX를 제공한다.
- 기본적으로 모든 정적 리소스를 최초 한 번만 다운로드 받는다. 새 페이지 요청 시, 필요한 데이터만 전달 받아 페이지를 갱신한다.
- 필요한 부분만 갱신하므로 새로고침이 발생하지 않고 속도도 빠르다.
- 위의 장점과 더불어 처음에 다운로드 크기가 크므로 초기 속도는 느린 편이다.

2. componet를 사용하여, html 재사용성의 편리성, 협업하기 좋기 때문에 빠른 개발 가능, 일관성, 유지 관리에 편리하다.

3. 데이터가 html에 자동 반영된다.

4. 앱처럼 뛰어난 UX를 갖고 있다.

5. 그냥 웹사이트보다 비즈니스적 강점 : 앱 처럼 사용되면 사용량 및 구매량이 증가함

 

---

리액트를 알아 가기 위해 알아야하는 사전 지식 : 

1. HTML, CSS

2. JS 문법 : var let const / if else / for / function return / array object / addEventListener 정도

 

 

 

 

 

 

 

참고 자료 

 

MVC패턴 : https://m.blog.naver.com/jhc9639/220967034588

[개발자 면접준비]#1. MVC패턴이란

데이터 바인딩 : https://velog.io/@rudans987/React-%EB%8B%A8%EB%B0%A9%ED%96%A5-%EB%B0%94%EC%9D%B8%EB%94%A9%EA%B3%BC-%EC%96%91%EB%B0%A9%ED%96%A5-%EB%B0%94%EC%9D%B8%EB%94%A9

 

[React] 단방향 바인딩과 양방향 바인딩

가상 돔 : https://velog.io/@mollog/React%EC%97%90%EC%84%9C%EC%9D%98-%EA%B0%80%EC%83%81%EB%8F%94-%EA%B0%9C%EB%85%90

React에서의 가상돔 개념

React 특징 : https://dev-yakuza.posstree.com/ko/react/create-react-app/react/

React란

모바일 앱 종류 (1) : https://lillo.co.kr/blog/16480

릴로 - 기분좋은 앱 푸시 마케팅

모바일 앱 종류 (2) : https://post.naver.com/viewer/postView.naver?volumeNo=34002292&memberNo=25379965 

모바일 앱의 종류와 차이(네이티브 앱, 크로스 플랫폼, 웹 앱, 하이브리드 앱)

FE프레임워크 비교 : https://haesoo9410.tistory.com/329

<FE프레임워크> 리액트 vs 뷰 vs 앵귤러 vs 스벨트