7차 세미나_29/05/21

React UI Library 사용법

Ant Design

Material UI

CORS

Same-Origin Policy

웹 브라우저 보안을 위해 프로토콜, 도메인, 포트가 동일한 서버로만 요청을 주고 받을 수 있는 정책

👇

Cross-Origin Resource Sharing

도메인이나 포트가 달라도 서버에 자원을 요청할 수 있는 메커니즘


아래와 같은 문제 발생 시; 서버에서 Access-Control-Allow-Origin을 수정해야 함!


Redux 기초

1. 예측 가능한
2. 중앙화된
3. 디버깅이 쉬운
4. 유연한

• 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 (오픈소스 JS 라이브러리)
• React, Vue 등 JS 라이브러리와 함께 사용된다.

언제, 왜 사용할까?

• 기존에는 useState를 통해 정의한 상태를 props를 통해 자식 컴포넌트로 전달하는 구조
• 프로젝트가 복잡해지면 거쳐야 하는 컴포넌트가 많아지므로 상태 전달이 비효율적일 수 있음

👇

1. 상태 관리를 한 곳에서 하고 싶을 때
2. 원하는 컴포넌트에 상태값과 함수를 직접 전달하고 싶을 때

전체적인 구조

1. store
2. action
3. reducer
4. store 내장 함수

store

• 어플리케이션의 상태는 하나의 저장소 store 안에 있는 객체 트리(상태 트리)에 저장된다.
• 상태 트리는 불변 상태를 가져야 한다.
• 상태가 업데이트되면 관련된 뷰가 다시 그려진다.
• 내장 메소드
  • getState() : store에 등록된 상태 정보를 불러옴
  • dispatch() : action을 발생시킴
  • subscribe() : 인자로 특정 함수를 전달하면, action이 발생할 때마다 해당 함수를 호출함

action

• 상태 변경을 나타내는 객체
• type 필드는 필수이며, 상수로 관리하는 것이 좋다.

reducer

• 실질적인 함수
• action이 상태 트리를 어떻게 변경할 지 작성한 순수한 함수
• 인자로 현재 state 와 action 을 받아 액션에 따라 교체된 새로운 상태를 반환한다.

Redux는 꼭 필요할 때 사용하자!

1. 지속적으로 상태가 변화하는 데이터가 많을 때
2. 모든 상태를 한 곳에서 관리해야 할 때
3. 최상위 컴포넌트 에서 모든 상태를 가지고 있기 힘들 때