로딩 중 처리하기

• 기본 로직

App.js의 isLoading 스테이트를 만들어 Loading 컴포넌트로 내려주는 구조. App.js의 setState에서

Loading.setState(App.state.isLoading)

을 실행하여 Loading에 새로운 스테이트(isLoading) 주고 재 랜더링.

그럼 isLoading이 변하는 시점에 setState해주면 되겟군

• 1번 : 비동기 요청전에 isLoading 값을 true로 바꾸어주는 액션 (=setState)

• 2번 : 비동기 요청하여 rootNodes를 받아오는

• 3번 : 비동기 요청 후에 받아온 rootNodes을 setState해준다.

• finally : 에러가 나더라도 isLoading 값은 바꾸어야 하므로 finally 스코프에 isLoading 값을 false로 바꾸어주는 액션 수행.

캐싱하기

불러온 데이터 ( 이미 지나간 디렉토리의 경우 )를 다시 불러오는 것은 비효율적이다 ! 캐싱을 구현해보자

다음과 같이 캐시할 데이터를 저장할 캐시저장소 선언.

// in App.js
// nodeId : nodes 형태로 데이터를 불러올 때 마다 데이터를 쌓는다.
const cache = {};

• 1번 : 캐싱된 데이터가 있는 경우
  아이디값으로 데이터 조회하여 비동기요청없이 가져온다.
  이미 캐싱되어있는 데이터이므로 캐시 저장소를 업데이트할 필요없다.

  ---

• 2번 : 캐싱된 데이터가 없는 경우
  캐싱된 데이터가 없으므로 비동기 요청하여 nodes 데이터 가져온다.
  캐싱되어있는 데이터가 아니므로 캐시저장소를 업데이트해준다.

  ---

• 뒤로가기 기능은 캐시되어있는 데이터가 있는지 없는지 점검할 필요없다. ( 불러오는 데이터는 모두 캐시에 넣고 있으므로 )

• 1번 rootNodes인 경우

• 2번 일반 nodes인 경우

🕶 ** 1번 위 const rootNodes = await request()은 왜 있는 걸까? 루트 노드 처음 불러올 때 캐시에 넣어놓고 사용하면서..

정리

파일 구조