[React] Local/ Redux state, useEffect, Virtual DOM

Redux state(전역 state)

: 수 많은 state를 관리하기 위해 탄생. store로 접근 가능

 

Local/Redux state 데이터 사용 주기에 따라 사용 권장

꼭 아래처럼 사용하라는 것은 아님. 개인이 판단하여 사용

Short-term

: 프로젝트 전역적으로 영향을 주지 않는 데이터. 빠르게 변화하는 데이터

ex) UL element, form 입력 정보 상태 변화, 텍스트 필드 문자 등

-> Local state

 

Medium-term

: 프로젝트에 전역적으로 영향을 주는 데이터

앱 실행 동안 유지되거나 API 통해서 로드된 데이터, 새로고침 전까지 유지되어야 하는 데이터

ex) 전역으로 사용되는 유저 정보, submit 양식을 제출하여 사용자 정보를 업데이트하는 경우

-> Redux store(state) 

 

Long-term

: 여러 페이지간 방문, 새로고침 동안 유지되는 데이터

-> 서버 데이터 베이스 혹은 브라우저 localStorage

 

 

useEffect(Effect Hook)

이를 이용하여 side effects 수행

useEffect는 effect 함수를 기억했다가 DOM 업데이트를 수행한 후 불러옴(렌더링 이후 발생)

렌더링마다 다른 함수가 전달됨

=> prop이 변할 경우를 대비

 

컴포넌트 안에서 불러내는 이유

: effect함수가 state 변수에 접근하기 위해서

 

side effects

: 정리가 필요한 것과 그렇지 않은 것으로 나뉨

정리가 필요하지 않은 side Effects

=> 반환값 없음

- 네트워크 리퀘스트(데이터 가져오기)

- 명령형(imperative) API 불러내기

- document.title(브라우저 API) 수정

- React 컴포넌트 DOM 수동 조작

- 로깅

 

정리가 필요한 Effects(clean-up)

=> 정리를 위한 함수 반환

- 외부 데이터에 구독 설정하기

 

 

Real DOM vs Virtual DOM

Real DOM	Virtual DOM
DOM 조작 비용이 큼	DOM 조작이 쉬움
메모리 낭비가 많음	메모리 낭비 없음
업데이트 속도 느림	업데이트 빠름
HTML 직접 업데이트	HTML 직접 업데이트 할 수 없음
요소 업데이트 -> 새 DOM 생성	요소 업데이트 -> JSX 업데이트
특정 Node를 지정 가능(querySelector)	초당 약 200,000개의 가상 DOM 노드 생성 가능
애플리케이션의 UI를 나타냄	가상의 DOM

 

 

 

 

22.11.30

코스 S2U6