React || Redux

React

-facebook에서 만든 ui컴포넌트 라이브러리

-컴포넌트 기반 아키텍쳐이다(캡슐화 확정성 결합성 재사용성 같은 이점이있다)

 

장점

1. Virtual DOM을 사용함으로써 DOM처리가 빠릅니다.

(Virtual DOM과 실제 DOM을 비교하여 변경된 부분만 반영합니다.)

2. 서버와 클라이언트 사이드 렌더링 지원을 통해 브라우저측 초기 렌더링 딜레이를 줄입니다.

3. Component의 가독성이 높으며, UI 수정 및 재사용성이 높습니다.

4. 라이브러리 이므로 다른 프레임워크와 혼용하여 개발 할수도 있습니다.

5. 메모리 관리와 성능이 뛰어나다

 

단점

1. View Only, View 이외의 기능은 써드파티 라이브러리를 이용하거나 직접 구현해야 합니다.

2. IE8 이하의 버전은 지원하지 않습니다.

3. 단방향 데이터 바인딩만 제공합니다.

 

예로 프로그래밍 개발과 개발자 사이에 플러그인,라이브러리,프레임워크를 서드파티로 볼 수 있다.

View only: 보여지는 부분만 관여. 데이터 모델링, 라우팅, ajax 등의 기능은 지원하지 않음. 별도의 라이브러리를 사용하여 구현해야 한다. 

 

데이터 바인딩

-두 데이터 혹은 정보의 소스를 모두 일치시키는 기법이다. 즉 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 기법이다.

양방향 바인딩의 경우, 사용자의 입력값이 곧바로 코드 상의 변수에 바인딩 될 수 있지만 단방향바인딩의 경우 적절한 Event를 통해서만 코드 상 변수에 데이터 값이 담긴다.

 

UI

-사용자가 제품/서비스를 사용할때, 마주하게 되는 면입니다

-사용자가 제품/서비스와 상호작용할 수 있도록 만들어진 매개체

UX

-사용자 경험의 약자로, 

-사용자가 어떠한 서비스/ 제품을 직간접적으로 이용하면서 느끼는 종합적인 만족

 

Redux

-리덕스는 가장 사용률이 높은 상태관리 라이브러리로써

-리액트의 복잡한 컴포넌트 구조속에서 보다 간편하게 모든 컴포넌트들이 state 를 쉽게 공유할 수 있게 해주는 방식이다.

 

리덕스 중요 키워드

Action :state 에 어떤 변화가 필요할 때 우린 액션이란 것을 발생시키며 이는 하나의 객체이다.

Reducer : State 에 변화를 일으키는 함수이다. 쉽게 말해 위에 만들어진 Action 등의 일거리를 직접 수행하는 놈이다.

Store : state을 수시로 확인해 view한테 변경된 사항을 알려주는것

Dispatch: 리듀서에게 Action 을 발생하라고 시키는 것