리엑트에서 recoil을 사용하여 서버와 연동하는 작업을 진행했다.
recoil에 대한 설명은 다른 블로그나 공식문서에도 많으니 생략하고 구현하면서 생각나는 것 위주로 작성합니다..
1. atom 에서 서버에서 요청한 값으로 초기값 설정하기
처음에는 selector에다 atom을 구독하고 서버에서 요청을 받은것을 처리하는 형태로 구현했는데 어쩌피 서버에 있는 데이터와 동기화하여 그 값이 디폴트로 들어갈텐데 하고 생각했다 그리고 공식문서에서도 atom의 설명에서도 promise 객체나 기타 다른 것이 들어가도 된다고 되어 있어서 해당 방식으로 구현해보았다.
참고한 공식 문서의 설명(출처 : https://recoiljs.org/ko/docs/api-reference/core/atom/)
2. API CRUD 기능 구현
get 부분은 초기값 세팅 용으로만 가져오고 그 이후에는 사용되지 않는다.
set 부분은 atom 에 선언된 두가지 요소에 대한 값 세팅하는 부분을 넣어놓았다. 위의 memoListState는 밑에서 요청하게될 set / delete 요청에 리턴된 리스트 값이 들어있는 값이고 memoDataState는 해당 요소가 수정될 명령 객체를 입력받는다.(굳이 이부분에 대해서 두가지의 다른 요소에 대한 set 기능을 selector에서 구현할 필요가 있나 싶긴한데 차후에 공부하면서 더 나은 방법을 찾아보려고 한다.)
위의 memoDataState를 구독하고 있는 selector로 위에서 set 될때 해당 selector가 호출된다. 호출된 값은 요청한 데이터 타입에 따라서 create/update/delete 기능 중 하나가 수행된다.
해당 selector에서 요청된 데이터는 화면에서 useEffect를 통해서 위에 set(memoListState, ...) 의 새로운 값으로 들어가게된다
selector 내부에서 해당부분을 처리하고 싶어서 이리저리 구현을 해보다가 일단은 기존에 해왔던 방식과 결합해서 구현했는데 useEffect를 대신하여 처리할 수 있는 방법을 찾고 있다.(이것도 올바른 사용법 중에 하나는 맞는 것 같은데... 좀더 좋은 방식이 존재한다고 생각하고 있는 중이다.)
구현한 소스 데이터 흐름
- 초기 데이터 서버에 요청-> 서버에서 해당 데이터 조회 후 리턴 -> 초기데이터 화면 세팅
- cud 기능에 따라서 서버에 요청 -> 해당 기능으로 서버에서 데이터 가공 후 처리된 데이터 리스트 리턴 -> 수정된 데이터 리스트 반영
또한 기존에 redux-saga와 redux-toolkit을 사용했을때는 로딩 state를 줘서 해당 값에 따라서 데이터 요청후 처리까지 해당 상태값을 통해 화면에 블러 처리를 한다든지 로딩프로그래스를 보여주는 형태였는데(기존 데이터 화면 위에)
recoil에서는 Suspense를 사용하라고 안내가 되어있다. 여기서 제공하는 fallback은 요청한 데이터가 오기전까지 대체하는 화면을 보여주는 형식이라서 기존에 사용했던 상태값을 이용하는 방식과 비슷하게 구현하는 방법을 찾아보려고한다.
출처 : https://recoiljs.org/ko/docs/guides/asynchronous-data-queries/
2편에서는 위의 로딩처리하는 방법. api 요청 처리하는 방식에 대해서 지속적으로 업데이트를 하면서 공부하는 방향으로 가지 않을까 싶다.
공부할때마다 너무 새롭다.
스터디 및 공식문서를 통해서 독학하고 있기 때문에 잘못 써져있는게 있으면 언제든지 댓글로 알려주시면 감사하겟습니다. 피드백은 언제나 환영입니다
