ReactJS 개념 정리 1

React & Reactive & React Native

React

페이스북이 웹 개발을 쉽게하기 위해 만든 기술

커스텀 컴포넌트를 만들고, 쉽게 조합해서 손쉽게 만들 수 있음

Reactive

마이크로소프트가 창안한 개념

스트림과 비동기 처리등을 LINQ에서 영향을 받은 방법

비동기 처리를 할 수 있게 한 패러다임

ReactiveX(Rx)를 중심으로 여러 언어에 맞게 다양하게 구현되어있음

React Native

리액트의 접근 방법을 모바일로 확장하는 페이스북의 오픈소스 프로젝트

기존 - 모바일 자바스크립트 Tool들이 WebView를 통해 인터페이스를 구축하는 하이브리드 방식

리액트 네이티브 - 자바스크립트로 작업하지만, 인터페이스는 네이티브 위젯으로 표시하는 방식

                           - 네이티브 UI를 통해 이질감 없고 쾌적한 사용자 경험 제공

 

 

프론트엔드 라이브러리 / 프레임워크

프론트엔드 라이브러리가 필요한 이유

요즘 웹이 웹 페이지가아니라 웹 어플리케이션이라, 유저인터페이스를 동적으로 나타내기 위해 많은 상태관리 필요

JavaScript로 직접 구현이 가능하지만, 프로젝트 규모가 커지고 다양한 유저인터페이스와 인터랙션을 제공한다면, 많은 DOM요소들을 관리하고 코드정리가 힘들다.

웹 개발 시, DOM 관리와 상태 값 업데이트 관리를 최소화하고, 오직 기능개발, 사용자 인터페이스 구현하는 것에 집중할 수 있도록 하기 위해 라이브러리와 프레임워크들이 만들어졌다.

ex) Angular, Vue, React, Ember, Backbone 등

 

Angular(https://angular.io/)

Router, HTTP 클라이언트 등 웹 프로젝트에서 필요한 대부분의 도구들이 프레임워크 안에 내장

컴포넌트와 템플릿이 완벽하게 분리

AngularJS는 javascript와 함께 사용되며, 기업에서 많이 사용 되어, 유지보수하고 있는 프로젝트가 많은 편

Angular2 부터는 주로 typescript와 함께 사용

현재 Angular8 버전

React(https://reactjs.org/)

“컴포넌트” 라는 개념에 집중이 되어 있는 라이브러리

생태계가 엄청 넓고, 사용하는 곳도 많음

HTTP 클라이언트, Router, 상태 관리 등의 기능들은 내장 되어 있지 않음

따로 공식 라이브러리가 있는 것이 아니므로, 개발자가 원하는 스택을 맘대로 골라서 사용

Vue(https://vuejs.org/)

입문자가 사용하기 쉬움

Webpack 같은 모듈 번들러를 사용하여 프로젝트를 구성 해야하는 Angular와 React와 달리, 단순히 CDN에 있는 파일을 로딩 하는 형태로 스크립트를 불러와서 사용하기도 편함

HTML을 템플릿 처럼 그대로 사용 할 수도 있어서 마크업을 만들어 주는 디자이너/퍼블리셔가 있는 경우 작업 흐름이 매우 매끄러움

공식 Vue-Router, Vuex 상태 관리 라이브러리가 존재

 

 

React 소개

We built React to solve one problem: building large applications with data that changes over time.

우리는 지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해 React를 만들었습니다.

변환(Mutation)

변화(Mutation) - 상당히 복잡한 작업

특정 이벤트가 발생 했을 때, 모델에 변화를 일으키고, 변화를 일으킴에 따라 어떤 DOM 을 가져와서 어떠한 방식으로 뷰를 업데이트 해줄 지 로직을 정해줘야 함

Facebook에서는 “그냥 Mutation을 하지 말자. 대신에, 데이터가 바뀌면 그냥 View를 날려 버리고 새로 만들어 버리면 어떨까?”

Virtual DOM (https://www.youtube.com/watch?v=BYbgopx44vo)

Virtual DOM 은 가상의 DOM

변화가 일어나면, 실제로 브라우저의 DOM에 새로운 것을 넣지 않 고, 자바스크립트로 이루어진 가상 DOM 에 한번 렌더링을 하고, 기존의 DOM과 비교를 한 다음에 변화가 필요한 곳에만 업데이트

이 Virtual DOM 을 사용함으로서, 데이터가 바뀌었을 때 업데이트 할 지를 고려하는게 아니라, 그냥 일단 바뀐 데이터로 일단 그려놓고 비교를 한 다음에, 바뀐 부분만 찾아서 변경

 

 

React 소개

리액트는 라이브러리입니다

프론트엔드 프레임워크가 MVC 또는 MVW 등 구조를 지향하는 것과는 다르게 오직 View 만을 담당

그러므로 리액트는 프레임워크가 아니라 라이브러리

Angular와 Vue가 Ajax, 데이터모델링, 라우팅 기능을 내장하고 반면에, React는 외부 라이브러리를 사용 해야 함 

• Routing : react-router
• 상태관리 : redux, MobX
• Ajax 처리 : axios나 fetch

 

Virtual DOM

1. 변화가 일어났다. 변화된 버전을 Virtual DOM으로 바꾸자

데이터가 업데이트 되면 전체 UI를 가상돔에 Re렌더링

2. Virtual DOM 끼리 비교하자

변화 전의 virtual dom 과 변화된 virtual dom 을 비교

3. 비교하여 바뀐 부분만 적용하자

바뀐 부분만 실제 DOM에 적용을 함으로서 레이아웃 계산은 한 번만 이행

 

ECMAScript 6 소개

ECMA(European Computer Manufacturers Association) Script는 JavaScript 프로그래밍 언어를 정의하는 국제 표준의 이름

ECMA의 Technical Committee39(TC39)에서 논의 되었음

현재 사용하는 대부분의 JavaScript는 2009년에 처음 제정되어 2011년에 개정된 ECMAScript 5.1 표준에 기반

이후 클래스 기반 상속, 데이터 바인딩(Object.observe), Promise 등 다양한 요구사항 들이 도출 되었고 그 결과 2015년 6월에 대대적으로 업데이트된 ECMAScript6 가 발표 되었고, 매년 표준을 업데이트하는 정책에 따라 2016년 6월에 ECMAScript7 까지 발표 됨

ES6 = ECMAScript6 = ECMAScript 2015 = ES2015

 

var / let,const

const

scope이 블록 단위

ES6에 도입된 키워드

한번 선언하고 바뀌지 않는 값을 설정 할 때 사용

let

scope이 블록 단위

변경 될 수 있는 값 선언

var

scope이 함수 단위

 

ES6 에서는 var 를 사용하지 않고, 값을 선언 후 바꿔야 할 땐 let, 바꾸지 않을 땐 const를 사용

 

 

ES6 축약코딩기법

1.삼항 조건 연산자 (The Ternary Operator)

2. 간략 계산법 (Short-circuit Evaluation)

기존의 변수를 다른 변수에 할당하고 싶은 경우, 기존 변수가 null, undefined 또는 empty 값이 아닌 것을 확인 해야 함 (위 세가지 일 경우 에러가 뜹니다)

이를 해결 하기 위해서 긴 if문을 작성 하거나 축약 코딩으로 한 줄에 끝낼 수 있음

3. 변수 선언

함수를 시작하기 전 먼저 필요한 변수들을 선언하는 것은 현명한 코딩 방법

축약 기법을 사용하면 여러 개의 변수를 더 효과적으로 선언함으로 시간과 코딩 스페이스를 줄일 수 있음

4. For 루프

5. 간략 계산법 (Short-circuit Evaluation)

기본 값을 부여하기 위해 파라미터의 null 또는 undefined 여부를 파악할 때 short-circuit evaluation 방법을 이용해서 한줄로 작성하는 방법이 있음

Short-circuit evaluation 이란?

- 두가지의 변수를 비교할 때, 앞에 있는 변수가 false 일 경우 결과는 무조건 false 이기 때문에 뒤의 변수는 확인 하지 않고 return 시키는 방법

아래의 예제에서는 process.env.DB_HOST 값이 있을 경우 dbHost 변수에 할당하지만, 없으면 localhost를 할당

6. 객체 프로퍼티

객체 리터럴 표기법은 자바스크립트 코딩을 훨씬 쉽게 만들어 줌

하지만 ES6는 더 쉬운 방법을 제안

만일 프로퍼티 이름이 key 이름과 같을 경우, 축약 기법을 활용할 수 있음

7. Arrow(화살표) 함수

Arrows 는 => 함수를 짧게 표현하는 방식(람다식)

이는 C#, Java8 이나 CoffeeScript와 문법적으로 유사

7.1 Arrow(화살표) 함수 ⭐⭐⭐⭐⭐

Arrow 함수와 기존 함수는 참조하고 있는 this의 값이 다름

8. 묵시적 반환(Implicit Return)

return 은 함수 결과를 반환 하는데 사용되는 명령어

한 줄로만 작성된 arrow 함수는 별도의 return 명령어가 없어도 자동으로 반환 하도록 되어 있음

다만, 중괄호({})를 생략한 함수여야 return 명령어도 생략 할 수 있음

한 줄 이상의 문장(객체 리터럴)을 반환 하려면 중괄호({})대신 괄호(())를 사용해서 함수를 묶어야 함

이렇게 하면 함수가 한 문장으로 작성 되었음을 나타낼 수 있음

9. 파라미터 기본 값 지정하기(Default Parameter Values)

기존에는 if 문을 통해서 함수의 파라미터 값에 기본 값을 지정해 줘야 했음

ES6에서는 함수 선언문 자체에서 기본값을 지정해 줄 수 있음

10. 템플릿 리터럴 (Template Literals)

백틱(backtick) 을 사용해서 스트링을 감싸고, ${}를 사용해서 변수를 담아 주면 됨

11. 비구조화 할당 (Destructuring Assignment)

데이터 객체가 컴포넌트에 들어가게 되면, unpack 이 필요

12. 전개연산자 (Spread Operator)

ES6에서 소개된 전개 연산자는 자바스크립트 코드를 더 효율적으로 사용 할 수 있는 방법을 제시

간단히는 배열의 값을 변환하는데 사용할 수 있음

전개 연산자를 사용하는 방법은 점 세개(...)를 붙이면 됨

concat()함수와는 다르게 전개 연산자를 이용하면 하나의 배열을 다른 배열의 아무 곳에나 추가할 수 있음

전개 연산자는 ES6의 구조화 대입법(destructuring notation)와 함께 사용할 수도 있음

13. 필수(기본) 파라미터 (Mandatory Parameter)

기본적으로 자바스크립트는 함수의 파라미터 값을 받지 않았을 경우, undefined로 지정

다른 언어들은 경고나 에러 메시지를 나타내기도 함

 

이런 기본 파라미터 값을 강제로 지정하는 방법

• if 문을 사용해서 undefined일 경우 에러가 나도록
• ‘Mandatory parameter shorthand’을 사용하는 방법

14. Object.assign() 함수

첫 번째 Object에 그 다음 Object (들)을 병합해 줌

Object.assign(target, ...sources)

첫 번째 인자는 target 객체

두 번째 인자부터 마지막 인자까지는 source 객체

source 객체는 target 객체에 병합

리턴값으로 타겟오브젝트를 반환

15. Promise 객체

“A promise is an object that may produce a single value some time in the future”

Promise는 자바스크립트 비동기 처리에 사용되는 객체

자바스크립트의 비동기 처리 : ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’

new Promise(function(resolve, reject) { ... } );

Promise 객체를 생성하면 resolve와 reject의 함수를 전달받음

작업이 성공하면 resolve함수를 호출하여 resolve의 인자값을 then으로 받게 됨

작업에 실패하면 reject 함수를 호출하여 reject의 인자값을 catch로 받게 됨

성공, 실패 여부에 관계없이 항상 처리 되게 하려면 finally로 받아서 처리할 수도 있음

16. import / export

ES6(ECMA2015)부터는 import / export 라는 방식으로 모듈을 불러오고 내보냄

Export는 내부 스크립트 객체를 외부 스크립트로 모듈화 하는 것

export 하지 않으면 외부 스크립트에서 import를 사용할 수 없음

여기서는 as Logger로 대체로 불러줬는데 왜 myLogger를 불러왔을까????????????????????????????????