가장 기본이지만 가장 어려운 그것..
데이터 전달의 타이밍
문제는 메인페이지에서 발생했다.
로그인 -> 토큰이 로컬스토리지에 저장
-> 메인페이지에서 로컬스토리지에 저장된 토큰 디코딩하여 하위 컴포넌트에 디코딩된 토큰값이 필요한 경우 props로 전달 (문제발생)
useEffect에 토큰값을 받아서 상태를 변환해주는 함수가 있었고, dependency는 빈배열로 넣었다. 이때의 생각은 모두 이미 로컬스토리지에 토큰이 저장되어 있는 상태라서 랜더링 될 때 한번만 체크해서 토큰값을 가져오는게 맞다고 생각했다.
이렇게!
useEffect(() => 관련함수, [])
그랬더니 props가 잘 내려오는데 이상하게 useEffect안에서 토큰이 안내려오는 것이었다..! 그래서 자꾸 디코딩된 토큰이 객체라서 키값으로 value를 빼와야되는 상황이었는데 자꾸 값이 없어서 해당 값을 못빼내 api에 파라미터로 안들어가는 등의 관련된 오류가 떴다.
그래서 다른 컴포넌트를 일단 다 주석처리하고 token prop받는 하나의 컴포넌트만 살려서 확인을 해봤다. 진짜 안받아지나, console로 전역에는 받아지는지, useEffect 안에서도 받아지는지, 찍어보니 진짜로 useEffect안에서 토큰이 빈 값으로 {} 이렇게 출력이 됐다.
그런데 이상한건 전역에서는 토큰이 받아지는것이었다.
그래서 우리는
아니 컴포넌트 전역에서 토큰이 받아지는데 대체 왜 useEffect 안에서 토큰을 못받을까?
에 대해 열띤 토론을 하게 되었다.
그러고 하나하나 console로 전역컴포넌트 실행, useEffect실행을 쳐가며 실행순서를 보니,
위에서부터 코드 실행되어
1. 전역에 있는 코드 실행
2. 컴포넌트 렌더링
3. useEffect 실행
4. 전역에 있는 코드 실행
5. 나머지 전역에 있는 코드 실행.
즉, props를 받기 전에 useEffect가 실행되며 props을 못받는 것이었다.
우리가
전역에서 props를 받는데 왜 useEffect에서는 안받아지지?라고 생각한 것도 반은 틀린거였다.
전역에서도 처음 코드돌때는 props를 못받고, 두번째 코드돌때 받는 거였으니..
useEffect(() => 관련함수, [token])으로 deps를 token props으로 넣어주니, useEffect안에서도 token값이 잘 받아지는 것을 확인했다.
프론트 3명이서 1시간 동안 함께 고민했는데 결과가 너무 허무해서, 서로 아... 했다.
+6/14
내 페이지에서도 해당 문제로 편지쓰기 버튼을 두번 눌러야 되는 버그가 생겼다.
필수값을 다 입력하고 버튼을 눌러도 다음 동작으로 넘어가지 않고, 한번 더 눌러야 다음 동작인 post를 보내게 되었다.
그리고 그 이후에 내가 잘못눌렀나하고 테스트 해보면 한번만 눌러도 post로 넘어가서 여태 내가 잘못누른지 알았는데, 알고보니 버그였다.
에러가 뜨질 않아서 어느 부분에서 버그가 나온지 정확하게 알 수 없었는데,
console로 어느부분에서 동작이 연결되지 않는지 찾아보니 false -> true로 바뀌어야되는데 클릭을 한다던가, 동작 트리거가 없는이상 자동으로 바뀌지 않는 것이었다.. 그래서 onSuccessSendingStatus가 true가 되면 onHandleOpen()이 실행되어야되는데 핸들오픈이 실행되지 않아서 서버에 post가 되지 않았다.
그래서
useEffect(() => {
onHandleOpen();
}, [onSuccessSendingStatus]);이렇게 함수를 감싸주고 dependency에 값이 변하는 부분을 넣어주니 문제 해결!
버그보고 그러면 true로 바뀌기 전까지 강제로 버튼을 안눌리게 만져줘야하나 고민하고 구조 뜯어 고칠 생각에 아찔했지만, useEffect로 다행히 간단하게 해결..
비동기 몇 개 끼고 컨텍스트관련된 오류나면,
디버깅 시작하기도 전에 일단 머리부여 잡게 된다.
그러고 기도 "아 하나님(무교입니다.) 저에게 왜 이런 시련을..."
