useEffect 실행 순서로 인한 오류 문제

[euny0ung]

📒 이슈 내용

연구분야 컴포넌트에서 useEffect 실행 순서로 인해 오류가 발생합니다.

📑 상세 내용

1. return 안에서 useEffect(mock api)로 부터 받아온 값을 사용해야하는데, 실행 순서가 return -> useEffect 라서 저장된 값이 없어 오류가 뜹니다.
2. 이전에는 옵셔널 체이닝을 이용하여 문제를 해결했는데, 이번에는 옵셔널 체이닝, AND 연산자, if문을 써봐도 문제가 해결되지 않았습니다. PR에 있는 mock api 연결 코드를 봤는데 이런 오류를 어떻게 처리하신건지 잘 모르겠어서 이슈 올립니다.

✔️ 체크리스트

• [ ] 오류 해결방법 찾기
• [ ] 수정하기

[suinj8]

왜 이렇게 동작하는지 자세히는 모르겠는데 제 코드랑 비교해보면서 조금씩 고쳐보고 찾았습니다. const [apiList, setAPIList] = useState({ fields: [] }); 이렇게만 바꾸어주면 해결됩니다. 자세한 동작 방식은 모르겠지만 아마 객체배열 안에 객체배열이 있어서 이렇게 받아줘야 하는게 아닐까 라는 생각입니다.(아닐수도 있습니다) 저도 다른부분 api적용할 때 이렇게 해야 정상적으로 잘 받아오더라구요.

추가적으로 useState를 이용해서 만들면 비동기로 해도 잘 작동하는 이유는 state값이 변화되면서 state와 연관된 컴포넌트들이 재랜더링되어서 그렇습니다. 한마디로 처음에는 아무것도 없었다가 api값이 불러와지고 state값이 변경되면 컨텐츠 부분을 다시 랜더링하고 화면에 출력되게 됩니다.

수정하시고 PR할 때 디버깅으로 사용하셨던 console.log 같은것도 지워주시고 PR해주세요!

[suinj8]

추가로 연구분야 url을 researchfield -> field로 바꾸셨더라구요. 메뉴나 서브메뉴 같이 navigate함수 사용되는 부분 모두 field로 바꿔주세요.

[LimEunSang]

저도 수인이랑 같은 방법으로 해결했어요.

또, url 부분도 발견했는데 수인이가 댓글로 잘 써놨네요!

[euny0ung]

정말 감사합니다!!! 몇주째 해결 못하고 있던건데 바로 해결됐네요. 나머지 수정해서 PR하겠습니다.