React - useEffect에서 axios.get을 이용해 받은 데이터로 요소생성

서버에서 많은 데이터를 가져오는 작업 같은 경우는 오래걸리기 때문에

useEffect 훅을 이용해 데이터를 가져오는게 좋은 방법이라고 배웠습니다.

 

아직 리액트가 익숙하지 않아서  axios를 사용했을때 겪었던 문제점과 해결방법에 대해 글을 작성해보겠습니다. 

먼저 문제가 발생한 상황부터보겠습니다.

 

첫번째 문제 상황

• 서버api 데이터를 이용한 요소 생성시 데이터가 할당되기전에 요소가 생성 -> 오류 

아래의 이미지를 보시면 왼쪽상단에 카테고리 버튼을 클릭했을 경우 카테고리 목록이 나오는데

이때 카테고리 목록은 서버에서 받은 카테고리 데이터입니다.  

 

그래서 axios.get을 이용해 데이터를 받아와야하는데 배운대로 useEffect안에 해당 코드를 적었습니다. 

그리고 받은 데이터를 이용해 return문안에서 아래처럼 map을 이용해 데이터를 호출해주었습니다. 

여기서 코드를 실행하는데 문제가 발생했습니다. 

map관련 오류가 뜨길래 map형식을 잘 못 적었나? 아니면 데이터호출이 안되었나? 라는 생각을 했고 

console과 같은 작업으로 확인을 했으나 데이터는 문제가 없이 받아졌고 map형식도 문제가 없었습니다.

 

계속 고민을 하던 중 예전에 useEffect에 대해서 배울때 페이지의 요소들이 먼저 렌더링되고 useEffect안의 코드가 실행된다는 것이 생각이 났습니다. 

여기서 문제가 발생한 것이 었습니다. return문안에서 서버의 데이터를 받기 전에 해당 데이터를 이용해 요소를 생성하려다 보니까 에러가 발생한것이었습니다.

 

그래서 아래와 같이 return문 안의 코드를 수정했습니다.

즉 category라는 데이터가 값이 있으면 요소를 생성하고 아니면 null을 생성해주었습니다.  이렇게 코드를 수정하니 문제없이 잘 해결되었습니다. 

 

 

 

정리

• useEffect를 이용해 서버의 데이터를 가져와서 해당 데이터로 요소를 생성할때는 삼항연산자를 사용해 데이터가 존재하면 요소를 생성해주기로 하자!