[Pre Onboarding] 8월 26일 5주차

[Pre Onboarding] 8월 26일

Data Binding

뷰(화면)과 모델(데이터)을 연결하는 것을 의미

jQuery나 DOM API로 DOM에 직접 접근하여, 데이터를 화면에 데이터를 보여주려면,

$('p').text(unreadCount);

tag가 변경되면 react에서는 JSX만 바꾸면 되고, JS 코드까지 수정할 일이 없는데, jQuery나 DOM API는 DOM을 접근하는 JS 코드까지 수정한다. 데이터와 화면이 연결되었다기 보다는 직접 접근하여 조작.

단방향(One way Data Binding, Unidirectional Data Flow)

리액트는 단방향 데이터 바인딩, 리덕스도 단방향 데이터 바인딩 흐름에서 만들어진것

양방향(Two way Data Binding)

MVC Pattern

관심사의 분리(separation of concern, SoC)에서부터 나온 패턴

• 관심사 분리로 코드의 단순화 및 유지보수의 더 높은 수준의 자유가 생긴다. 관심사가 잘 분리될 때 독립적인 개발과 업그레이드 외에도 모듈 재사용을 위한 더 높은 정도의 자유가 있다. 모듈이 인터페이스 뒤에서 이러한 관심사의 세세한 부분을 숨기기 때문에 자유도가 높아짐으로써 다른 부분의 세세한 사항을 모르더라도, 또 해당 부분들에 상응하는 변경을 취하지 않더라도 하나의 관심사의 코드 부분을 개선하거나 수정할 수 있게 된다.

SoC에서부터 나온 패턴이 MVC 패턴이다.
리액트는 MVC 패턴은 아니다.

Model

• 데이터라고 생각하면 된다. json 또는 데이터 모델 정의.
• 일반적으로 데이터를 처리하는 로직과 함께!

View

• 화면, html, 레이아웃 이라고 생각하면 된다.

Controller

• 이벤트 핸들러와 이벤트를 처리하는 로직이 있는 곳이라고 생각하면 쉽다.
• 데이터랑 뷰 이어주는 역할.
• 요청이(이벤트 발생) 오면 모델에 적절한 로직을 실행하도록 한다.

대표적인 MVC Pattern FW

ruby on rails, laravel, angular, backbonejs, django..

React?

• React.js는 mvc pattern을 포함(이용)하고 있는 FW이 아니다.
• React.js는 레고처럼 조합해서 사용할 수 있는 UI 라이브러리이다. 데이터 관리(감지)가 쉬운 재사용 가능한 UI 컴포넌트를 위해 만들어졌다.

Flux Pattern

Flux는 Facebook에서 소개한 아키텍쳐입니다. 전통적인 MVC 패턴을 버리고, 개발이 오래되고 커져도 유지보수가 쉽고 reliable하고 high performance를 유지하는 새로운 패턴을 제시했습니다.
Redux는 Flux 패턴에 기반한 라이브러리이므로 Flux 패턴을 이해하고 넘어갈 필요가 있습니다!

Flux

• 단방향 데이터 흐름(unidirectional data flow)이 핵심.
• 사용자에 의해 Action이 발행되면, 해당 Action에 영향이 있는 모든 View가 갱신(rerender)된다. 어디에서 어떤 일이 일어날지 알 수 있다(=예상가능하다. 복잡하지 않다). 흐름은 하나니까!
• Flux는 세 가지 부분으로 구성 되어 있다.
  1. Dispatcher : 사용자가 액션을 하면 디스패처가 감지해서 이런 액션이 일어났어라고 하는것
  2. Stores: state라고 생각하면됨 전체 앱에서 여기저기서 쓰고싶은것
  3. Views(리액트 컴포넌트) : 리액트 컴포넌트라고 생각할 것

Redux Intro

Redux는 Flux 패턴을 근본으로한 라이브러리이다.
React 뿐 아니라 다른 UI 라이브러리에서도 사용할 수 있다.

Why Redux?

• 앱에서 전체적으로 사용할 데이터 관리 필요
  → React.js 는 단순 UI 라이브러리이기 때문에 데이터 관리를 고려하고 있지 않음
  → 로컬스토리지에 데이터를 저장하고 불러오는 로직 대신
  → Redux!
• 저~~ 멀리 자식의 자식의 형제의 부모의 컴포넌트에 데이터를 전달하려면 props로 열심히 보내야 한다.
• 하나의 state(데이터)를 여러 컴포넌트에서 필요한 경우가 있다.(야간모드, 최근본상품 등..)
• 페이지의 레이아웃에 영향 받지 않는 modal, toast, alert 같은 전역 UI 컴포넌트의 상태 관리도 필요하다.

언제 Redux를 써야할지 위의 기준으로 생각하자. 아무데서나 쓰지 말자.

• Store: Application의 전체 state는 store라고 불리는 곳에서 관리된다.
  • store는 redux의 상태값(state)를 갖는 객체이다.
    전체 store를 관리하는 하나의 객체
• Action: action은 state 변화를 일으킬 수 있는 행동정보, 현상등이라고 생각하면 된다.
  뭔가 변화시킬 수 있는 정보
  예) lang_ko, lang_en
• Dispatcher: action이 일어나면 Dispatcher를 통해서 store의 state가 업뎃된다.
  사용자가 어떤 버튼을 클릭해서 어떤 액션을 발행하면 디스패처를 통해 state가 변경된다.
  액션을 받아 state를 변경시켜주는 역할
• View: state가 변경되면 view에서 감지하고, 화면에 반영(rerender) 된다.
• 위의 그림과 같이 view단에서 action이 일어날 수도 있다(당연). view에서 action이 일어나면 -> 다시 dispatcher에 의해 store에 저장되고 -> state가 변경되면 -> 필요한 view에서 감지를 알아차린다.
  화면!

Redux의 세 가지 원칙

:: 전체 상태값이 하나의 객체로 표현됨

• 간단히 말하면 하나의 React앱에 store가 하나라는 뜻임

---

:: 상태값(state)는 읽기 전용이다.

• 원래 컴포넌트에서의 state 관리 생각하시면 됩니다.
• (state 값 직접 바꾸지 않고, setState 함수 사용해서 변경 했잖아요~)

---

:: 상태값(state)은 순수 함수에 의해서만 변경되어야 한다.

• 상태값(state)을 변경시키려면, 상태값을 변경하는 함수가 필요합니다.
• 이 함수를 reducer라고 하고, 이 함수가 순수함수(pure function) 이어야 한다는 말.
  순수함수는 프로그래밍에서 많의 사용되는 단어
  예상가능한 반환값을 가지는 순수함수
  reducer는 순수함수

---

Redux 사용 | Reducer Store Action

Redux 구성 요소 - Action

사용자의 입력이나 UI 조작, 웹 요청 완료같이 어떠한 상태 변화를 일으킬 수 있는 현상.
즉, 어떤 조작인지 정보를 갖고 있는 자바스크립트 객체이다

Action의 생김새
action은 객체이다.
action 객체는 아래와 같이 생겼다. 조작하고 싶은 정보는 type 프로퍼티에 지정한다.

{
    type: 'SHOW_MODAL'
}

Action 특징
다음과 같은 특징이 있다. 이것만 기억하면 쉽다!

1. action은 객체이다.
2. action은 반드시 type 프로퍼티가 있어야 하고,
   일반적으로 type은 어떤 행동을 설명하는(조작하고 싶은 내용) 문자열이다.
3. type 이외에 다른 프로퍼티를 가져도 되고,
   주로 해당 action에 필요한 부가적인 데이터를 전달하고 싶을 때 사용한다.

Action 정의
action은 객체 리터럴로 바로 정의하는 것이 아니라, action을 만들어주는 함수를 통해 만든다. 이러한 함수를 Action Creator(액션 생성자)라고 한다.

function showModal() {
	return { type: 'SHOW_MODAL'}
}

action은 일반적으로 '행동 정보'인 type만 갖고 있지는 않고, 부가적인 정보를 포함하고 있다.

function showModal({ title }) {
	return { type: 'SHOW_MODAL', title }
}

이렇게 action을 생성합니다.

showModal({ title: '로그인' });

Redux 구성 요소 - Reducer

reducer는 action이 발생했을 때 state를 변화시키기 위한 함수이다.

Reducer의 생김새
reducer는 action과 현재의 state를 인자로 받고, 이 action의 내용(type)에 따라 state를 변화시킨다.

(state, action) => nextState

---

Reducer 정의

function modal(state, action) {

  switch(action.type) {
    case 'SHOW_MODAL':
      return {
        ...state,
        showModal: true
      };
    case 'CLOSE_MODAL':
      return {
        ...state,
        showModal: false
      };
    default:
      return state;
  }

}

---

Redux 구성 요소 - Store

store는 앱에 오직 하나만 있고, 이 유일한 store를 사용하여 app의 전체 상태를 관리 한다.
store 생성은 Redux에서 하라는대로

//index.js
import { createStore } from 'redux'
import modalReducer from './ModalReducer';

const **store** = createStore(modalReducer);

• redux에서 제공하는 createStore 함수 생성
• store를 생성할 때 reducer를 인자로 전달하면 된다.