ㅎ ㅏ... 너무 힘들었ㄷ ㅏ...
어제 리액트쿼리에 넣어서 가져온 값이 있는데 이게 data고,
이 data에서 특정 사용자를 알아챌 수 있는 고유번호가 있어서 일단 하드코딩 중이니까 이걸 그냥 지정해서 가져와서 얘를 axios의 param으로 넣어서 목업데이터의 정보를 가져오는 걸 작성한 게 dataDetail이었다.
근데 data는 그냥 알아서 가져오고 처음부터 set이 되는데 dataDetail은 onClick이벤트로 동작하게 해 놨더니 dataDetail이 바로 set이 안 되는 거였다.
처음부터 set을 시키려고 onClick함수 바깥에서 뭐 이것저것 해 봤는데 생각해보니까 이게 지금이야 그냥 지정되어 있는 걸 가져오는 상태지만 나중에는 인덱스 값까지 찾을 수 있게 맞춰줘야 돼서 onClick 이벤트가 동작하면서 set을 하는 게 맞는 거야.
그래서 다시 장고의 시간을 거쳐... 거치고 또 거쳐... 매우 많이 거쳐...
모달창을 열려고 클릭을 할 때 dataDetail이 set 되면서 내가 작성해 놓은 더하기 수식이 실행되고 그 값이 setState 함수로 동작하면 되는 아주 간단한 일이었는데...
dataDetail이 set 되지 않으니까 undefined라고 떠서 콘솔창에 에러가 자꾸 찍혔다.
이 상태에서 모달창을 껐다가 다시 켜면 그 때엔 다 잘 동작되어 있었다.
왜냐면 이미 한 번 눌렀을 때 캐싱 되고 set이 되는 것 같았거든.
이게 왜 이러냐 찾아보니까 setState 함수가 비동기적으로 작동해서 그런 거라고 하더라. 너무 바로바로 바뀌면 리액트의 가장 큰 장점인 적은 렌더링이 의미가 없어지니까 최종값만 바뀌게 해 놓은 거라고.
근데 어쨌든 나는 이게 바로 되어야 된단 말야...
아무리 생각해도 마운팅 될 때 자동으로 두 번 실행시켜버리는 useEffect를 쓰면 될 것 같았는데 여기서 써보고 저기서 써보고 온갖 짓을 다 해도 도저히 안 돼서 울다가(속으로) 결국에는 해결했다!
const handleParams = () => {
setDetailParams({
id: data.contents[0].id
companyId: data.contents[0].companyId
});
};
useEffect(() => {
if (dataDetail === undefined) {
// console.log('yapyapyap');
} else {
setAAA(() => {
return (
dataDetail.aaa +
dataDetail.bbb +
dataDetail.ccc +
dataDetail.ddd +
dataDetail.eee
);
});
setBBB(() => {
return dataDetail.fff - AAA;
});
}
}, [dataDetail, AAA]);그리고 setState 함수는 비동기적으로 작동하기 때문에 이 함수 내에서 계산하는 건 좋은 방법이 아니고 계산은 밖에서 한 다음에 최종 값만 set 하는 게 옳은 방법이라는 것도 새삼스럽게... 배웠다...
