회사에서 프로젝트를 하는데, axios와 recoil을 사용해서 데이터를 가져오고, 전역상태를 관리하였다.
여러가지 골치아픈 것들이 있었다.
1. 데이터를 가져오기 전, 가져오고 난 후의 분기 처리를 위해서 코드가 난잡해진다.
예를 들어서
const Example = () => {
const [list, setList] = useState();
useEffect(()=>{
...데이터 가져오는 코드 ...
},[]);
return(
<div>
{list&&(리스트를 가져오면 들어갈 코드)}
</div>
)
}근데 setState는 정확히는 비동기적으로 작동하는데, 메서드 체이닝이 불가능하다. then... catch.. 가 안된다는 것이다. 때문에 이런 코드까지 작성하게 된다.
만약에 데이터1을 가져와야 데이터 2를 가져올 수 있는 플로우를 따른다고 하면 체이닝을 해야할텐데, 혹은 비동기즉시실행함수도 앞에다가 await을 붙인다고 한들 의도대로 작동하지 않는다.
때문에 이런 코드를 작성하게 된다. 그리고 list안에는 이 state가 업데이트 되었는지에 대한 update 키를 넣게 된다.
즉
list는
{....
쏼라쏼라.....
updated:false | true
}
이런식으로 존재하는 것이다.
const Example = () => {
const [list, setList] = useState();
const [list2, setList2] = useState();
useEffect(()=>{
... 데이터(리스트) 1 가져오고 setList를 호출하는 코드....데이터를 가져오면 list의 updated를 true로 바꿔준다.
},[]);
useEffect(()=>{
if(list.updated){
... 데이터 2 가져오고 setList2를 호출하는 코드...
}
},[list])
return(
<div>
{list&&(리스트를 가져오면 들어갈 코드)}
</div>
)
}이렇게 하면 데이터 1을 가져오고 데이터 2를 가져오는 순서는 보장받을 수 있지만, 쓸데없는 코드가 너무 많이 들어갔다. 단순히 데이터를 순서대로 가져오기 위해서 말이다!!
때문에 리액트 쿼리라던지 다른 것들에 대한 니즈가 생길 수 밖에 없었다.
그래서 리액트쿼리에 대해서 며칠 간 공부를 해보기로 했다.
