상태 관리 - 전역 데이터를 위한 Recoil

• API를 통해 받아온 데이터를 가공하여 필요한 컴포넌트에서 잘 사용하기 위해서 전역적으로 데이터를 관리할 상태관리 툴이나 context API가 필요해졌다.
  • context API는 전역 상태를 전달할 때 객체 형태의 value를 사용한다. 따라서 객체 안의 값이 하나라도 변경되면 provider로 감싼 모든 하위 컴포넌트들이 리랜더링한다는 단점이 있다. 작은 프로젝트일 경우 좋다.
  • 대표적인 상태관리 툴인 Recoil의 경우 각각의 전역 상태에 대한 atom이 생성되고 해당 상태를 구독하는 구성 요소만 리랜더링 된다. 따라서 불필요한 리랜더링을 방지할 수 있다. 리액트의 장점을 살리려면 상태관리 툴을 사용하는 것이 좋아보였다. 프로젝트의 경우 여러페이지에서 api로 받아온 데이터를 사용하기 때문에 리코일을 사용해야할 것으로 판단 되었다. but, 리코일의 단점은 새로고침 할 경우 데이터가 유실 된다든가, 관리 측면에서도 이 데이터가 어디서 나 건온지 추적이 쉽진않다. 프롭스처럼 흐름을 따라서 찾을 수가 없기때문이다.
• 여러가지 고민했을때 Recoil을 도입하기로 하고 Recoil을 공부 하기 시작했다.

 

 

 

• atom 으로 생성한 api 파일 위치를 어디에 둘지
• selector사용법
• recoil 새로고침 데이터를 어떻게 할것인지 등등
• src - lib - recoil - atom - index.jsx 파일구조로, App에는 리코일 프로바이더를 선언해준다.

1. 강원도 실시간 미세먼지 수치를 확인하고 → 원하는 지역5개만 필터링해서 → 미세먼지가 가장 적은 지역과 수치를 저장! ← 여기서 recoil atom selector를 많이 공부했다 왜냐하면
2. 제일 먼저 데이터를 받은 currentSpot에 대한 정보가 다른 하위 컴포넌트 및 실시간 기상청 api의 파라미터로 사용되기 때문. (요구사항대로 가공은 해야함)
3. 그런데 api요청을 통해 데이터를 받기전에 페이지가 랜더링이 되어버려서 원하는 데이터를 화면에 못띄운다는 콘솔 에러창을 확인했다.
   
   
   

구글 검색해보니 useEffect로 마운팅 될때까지 페이지를 안띄우는것도 있는데, 전역적인 데이터 관리를 위해 리코일 도입을 결심했으니 recoil을 냅다 파봤다. useEffect사용하라는데?

useRecoilValueLoadable 라는 훅을 사용하면 api호출의 로딩상태를 관리할 수 있었다. 그리고 원하는대로 조건부 랜더링도 가능해서.. 사용자 친화적으로 화면을 꾸밀수 있다. 못함 ㅎㅎ

그런데 셀렉터로 받은 데이터를 아톰에 업데이트 해주려면 어쩔 수 없이 useEffect를 써야했다.

(atom, selector) 로딩상태를 관리하고 완료/진행/에러를 다르게 처리할 수있다! 써보자.

나의 경우 api끼리 유기적으로 연결이 되어있어서, 제일 중요한 실시간 미세먼지 조회api가 로드 되지 않으면 페이지가 뜨지 않도록 코드를 짰다.

실시간 최저 미세먼지 지역과 수치를 atom1에 저장하고 → 해당 atom의 데이터를 selelctor로 임포트해서 특정지역 기상정보를 요청하는 api에 넣어줌. 두번째 api는 제일 첫화면에서만 사용이 되기때문에 atom 생성은 하지 않았다.