Props vs State

Props

부모 컴포넌트와 자식 컴포넌트 사이의 관계에서 데이터를 전달할 때는 Props를 이용해야 한다.

Props는 부모 컴포넌트에서 자식 컴포넌트로만 전달할 수 있다.

부모 컴포넌트에서 자식 컴포넌트로 데이터가 전달되는 과정에서 Props는 변할 수 없다. (immutable)

1이라는 값을 전달해줬다고 했을 때 자식 컴포넌트에서는 전달받은 값을 변경할 수 없다.

변경이 불가능하기 때문에 부모 컴포넌트에서 다른 값으로 다시 전달하는 수 밖에 없다.

State

부모 컴포넌트와 자식 컴포넌트 간에 전달이 되는 것이 아니라 변할 수 있다.

각각의 컴포넌트 안에서 생기는 변화를 상태로 담는다.

값이 변경되면 페이지가 Rerendering 되는 성격을 갖는다.

Redux

기존 Props를 전달 받을 때는 부모에서 자식으로만 데이터를 전달할 수 밖에 없다.

이것이 여러 컴포넌트와의 관계로 발전하게 되면 데이터를 여러번에 걸쳐서 전달을 해야 한다.

이것을 편하게 하기 위해서 사용하는 것이 Redux이다.

Redux에는 Store라는 것이 있어서 이 Store에 데이터를 담고 사용할 때도 Store에서 꺼내서 사용하면 되어서 간편하게 데이터를 관리할 수 있다.

Redux 데이터 Flow(strict unidirectional data flow)

Redux는 컴포넌트에서 시작해서 Dispatch를 통해서 ACTION으로 이동하고 REDUCER로 이동하고 STORE로 이동하고 Subscribe를 통해서 컴포넌트로 이동하는 단방향(unidirection)의 성질을 가지고 있다.

그래서 Redux는 철저하게 한 방향으로만 흐르는 flow를 가지고 있다.

Action

Action은 무엇이 발생했는지 객체의 형식으로 설명해준다.

Reducer

(previousState, action) => nextState

원래 3이었던 State(previousState)가 action을 함으로써 4(nextState)로 변하는 것을 설명해주는 것이 Reducer이다.

이전 State와 action object를 받은 후에 변해진 state(next state)를 return 한다!

Store에는 여러가지 Reducer들이 존재할 수 있다.

Reducer 안에서 하는 일이 어떻게 State가 변하는지를 보여주고 변한 마지막 값을 반환해 주는 것이다.

여러 기능들에 대한 Reducer가 나눠져 있기 때문에 CombineReducer라는 것을 사용해서 Root Reducer로 합쳐준다.

미들웨어 Redux Promise와 Redux Thunk가 필요한 이유!

• Redux를 잘 쓸 수 있도록 도와주는 역할
• Redux는 모든 State를 Store에서 관리하게 되는데 State를 변경하기 위해서는 Dispatch를 통해서 Action으로 이동하고 Reducer로 이동하고 Store로 이동하는 흐름으로 변경하는 수 밖에 없다.
• 그런데 Store는 언제나 객체 형식으로만 값을 받는 것이 아니라 Functions와 Promise 형태의 값도 함께 받기 위해서 middle ware가 필요하다.

redux-thunk

• dispatch에게 어떻게 functions를 받는지 알려준다.

redux-promise

• dispatch에게 어떻게 promise를 받는지 알려준다.

Web socket

웹의 통신에는 Rest를 이용한 통신과 웹 소켓을 이용한 통신으로 나뉜다.

Rest는 단방향 통신이지만 web socket은 양방향 통신이다.

Rest를 이용한 통신을 하게 되면 채팅으로 예를 들면 웹을 새로고침해야 상대방이 전송한 메시지를 확인할 수 있다.

하지만 웹 소켓을 이용하게 되면 새로고침 하지 않아도 상대방이 전송한 메시지를 바로 확인할 수 있다.

Firebase

• 앱을 만들 때 필요한 부분들(인증, 데이터베이스, 스토리지, 푸시 알림, 배포 등)을 자동으로 만들어 주는 플랫폼

  

Firebase의 데이터베이스

Firebase에서 사용하는 데이터 베이스는 MySQL이나 오라클 같은 관계형 데이터베이스가 아니라 MongoDB 같은 NoSQL 기반의 Document 형식의 빠르고 간편한 데이터베이스이다.

그리고 정말 특별한 점은 RTSP라는 Real Time Stream Protocol 방식을 지원한다.

RTSP는 실시간으로 데이터들을 전송해주는 방식으로, 이 방식 덕분에 실시간 기능이 요하는 채팅 앱이나 택시 앱 같은 것들을 쉽게 구현이 가능하다!