(시험용) 21.10.20 엘리스 수업 React 심화

상태 관리 기술 :

• 앱 상에서 데이터를 메모리 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유하는 것
• 한 컴포넌트 내, 여러 컴포넌트 간, 전체 앱 상태관리 모두 포함

새로고침이 없는 웹페이지 = SPA

 

MPA 에서는 서버 데이터를 이용해 페이지를 랜더링, 클라이언트의 데이터와 서버의 데이터가 큰 차이 X(=서버가 데이터를 관리)

MPA

SPA 에서는 자체적인 데이터를 갖고, 서버와의 동기화가 필요한 페이지가 아닌 데이터만 처리. 그 외 데이터는 클라이언트만의 데이터로 유지(=클라이언트가 주로 데이터를 관리?)

유저와의 인터렉션이 많아질 수록 앱이 사용하는 데이터가 많아지고, 데이터 통신도 충분히 고려해야 한다.

 

SPA 에서는 페이지 로딩 시마다 모든 데이터를 로딩하기엔 오래걸리기 때문에 데이터를 캐싱하고 재활용 한다.

 

Flux Pattern : 페이스북에서 제안한 웹 애플리케이션 아키텍쳐 패턴

Undirectional data flow (일방향 Store(Data source) -> View) Flux는 MVC와 다르게 하나의 액션이 하나의 Update만을 만들도록 한다. Store가 하나 업데이트 되면 View가 하나 업데이트 된다. 하나의 유저 인터렉션에 여러 Action을 생성할 수 있다.

 

Flux 구조 : Action -> Dispatcher -> Store -> View 순으로 데이터가 흐른다.

 

useState : 단순한 하나의 상태 관리하기에 적합 const [state,setState]=useState(초기값(=함수,객체, 값..)), useEffect랑 같이 사용됨

useRef : 상태가 바뀌어도 리렌더링 하지 않는 상태를 정의함. (UI 변경과 상관 없을 때..) 

useContext : 컴포넌트와 컴포넌트 간 상태를 공유할 때 props에서 또 props로 계속 내려가야 할 때

useContext를 위한 Context의 value가 바뀌면, 그 Context를 사용하는 모든 컴포넌트가 리렌더링된다.

useReduce : setState가 너무 많을 때 const [state,dispatch[=useReducer(reducer,초기상태)

 

실습1 useState만 사용

일단 filter 종류는 3가지가 있고(username, city, company) 

만약 username filter를 적용하게 되면 Karianne 의 정보를 가지고 와서 이름,도시,주소를 붙인 다음
다 소문자(low case)로 바꿔서 해당 query가 있는지 찾는다.

거기까지가 .values .map .map .join 이고 뒤에 search까지 해준다.

그다음 dependency array를 손봐준다 [query, searchData, filters]

---

실습2 useReducer 사용

위에서 했던 여러 action들을 더 보기 좋게 리펙토링 한다. init, search, add.filter, remove.filter로 action을 정의할 것이다.

그리고 사용했던 여러 state들(users, searchData, query, filters) 들을 한번에 묶어서 initialState로 넘겨줘야 한다.

기존의 state들 대신 [state,dispatch]만 사용

action 은 이와 같은 객체이다.

먼저 case init과 case search 정의. useReducer를 쓸 거기 때문에 setUsers대신 case와 return으로 state를 변경함.

데이터 가져오는 부분에서도 setSearchData를 쫙 뺴고, useEffect에서도 set을 다 뻈다

그리고 마지막에 users대신 state를 dispatch와 함께 사용하므로 정의해줌

add.filter과 remove.filter도 set을 없애고 state와 return으로만 정의해줌

---

실습3 useContext 활용해 Dynamic Form 구현

Dynamic Form 이란? 우리가 input갯수를 이렇게 늘리거나 줄여도 잘 동작하는 Form

폼 입력 구현

폼 입력 수정 구현 ( formRef.current가 새로운 객체를 만들어 input이 바뀌고 Submit누르면 바로 반영되도록

제출 구현

---

React 앱 빌드와 배포 : 로컬에서는 잘 동작하나 다른 사람이 인터넷에서 내 앱을 볼 수 없음. -> Public IP주소로 직접 접근할 수 있도록 하고 지속적으로 앱을 수정하고 배포해야 한다.

배포를 위한 React 앱 준비

• yarn.lock, package-lock.json이 동시에 존재하지 않도록 하기
• 로컬에서 npm run build를 실행하여 빌드 시  에러가 발생하지 않는지 점검
• 로컬에서 배포하여 rpoduction build가 제대로 실행되는지 점검

깃랩에 배포하기

master에 마지막으로 작성한 커밋까지 잘 적용됬는지 확인

 

Azuer를 사용한 VM 배포

https://portal.azure.com/#home

Microsoft Azure