06_비동기 통신 (유저 리스트)

우선 axios를 깔아주자

 

yarn add axios

 

우선 get방식으로 서버에서 데이터를 요청해서 받아온다

그 값을 result 변수에 넣어주고

async, await 을 이용해서 블락을 걸어주어 비동기통신이 끝난뒤 코드가 진행될수 있게 해준다.

가져온 result값에서 data를 useState([]); 배열에다가 넣어준다!

- axios.get("url")

- async / await

- [users, setUsers] = useState([]);

 

위 모든 값을 getUsers란 변수에 arrow함수로 넣어주었고

유저리스트보기 라는 div를 클릭하면 getUsers함수가 실행 될수 있도록 했다

함수를 사용할때 변수에 넣어두면 이벤트가 실행될때마다 함수가 생성되는걸 방지할수 있다

 

통신이 완료된 후

map함수를 이용해서 유저리스트를 뿌려줬다

map함수는 배열에만 사용가능하고 배열을 반환하는 함수다

위에 함수에서 useState로 가져온 result.data값에서 name 부분만 가져와 리스트로 뿌리기 위해 item.name을 넣어줬다

그리고 map함수를 사용할때는 유니크한 key값을 넣어주는것을 react에서 권장한다 안할시 경고뜸

그래서 map함수와 같이 생성된 index 번호를 넣어줬당