React로 인스타 클론 코딩을 하던 와중, User 정보가 담긴 데이터가 있으면 좋겠다는 생각이 들었다.
그렇다고 직접 Object들을 담은 Array를 만들(수는 있겠지만)고 싶지는 않으니,
User 데이터를 가진 서버에 API 요청을 보낸 후 이를 사용해보고자 했다.
(API : https://jsonplaceholder.typicode.com/users)
이전에 책에서 했던 외부 API 연동 부분을 참고하면 되겠군!
2021.03.18 - [Frontend/React] - 리액트를 다루는 기술 _ 14장
리액트를 다루는 기술 _ 14장
눈 깜짝하니 목요일이다. 14장. 외부 API를 연동하여 뉴스 뷰어 만들기 지금까지 배운 것을 바탕으로 뉴스 뷰어 프로젝트를 진행해 볼 예정! 전체 흐름은... 1. 비동기 작업의 이해 2. axios로 API 호출
23life.tistory.com
버튼을 눌렀을 때 User 데이터를 받아올 예정.
우선 data라는 State를 선언해주시고, 초깃값을 담아뒀다.
제일 첫 시도! async&await 콤비 대신 그냥 axios의 .get을 이용했다.
하지만 반환되는 데이터에 username이라는 key값이 존재함에도 불구...
userData를 console에 찍어보니 자꾸 빈 값이 나타난다!
갖은 실패 후 요청했을 때 반환되는 데이터의 형태를 아는 게 우선이라는 생각이 들었다!
console.log(response)로 API 응답 전체를 받아보니...
아하! 우리가 원하는 값은 응답(response) 속 data 속 Array 속에 Object 형태로 들어있었다!
그러니 요런 식으로 받아와주면 username만 얻을 수 있다!고 생각하면 오산.
response.data 역시 Objcect들이 담긴 Object 덩어리.
따라서 그 속의 username을 꺼내고 싶다면...
for문을 통해 i번째의 username을 가져오는 식으로 해야 한다.
그런데 이왕 하는거 async & await 콤비를 써보자는 생각이 들어(많이 쓴다니까...)
이렇게 써줬다. 큰 흐름이 달라진 건 없다!
즉 이런 식으로 하면...
for문을 돌며 response.data 속 각 Object의 username을 0번 째부터 받아온 후,
이들을 myname이라는 Object에 넣어준 후, 얘네를 data라는 State에 concat으로 추가!
setData안에 넣어줬으니 State를 변화시켜 줄테다.
오잉... data란 State를 찍어보니 제일 초깃값밖에 들어있지 않다. 즉 상태 업데이트가 안됐다!
data.concat을 통해 인자가 추가된 새로운 배열을 반환하고, 얘를 setData에 넣어 업데이트가 될 줄 알았는데...
쨔잔. 그래서 map함수를 써줬다!
reponse.data를 mapping 하면서 각 요소 속 id와 username을 이용한 Object를 만들고,
이를 return 함으로써 만든 Object들로 이루어진 새로운 배열을 return 해준 모습이다!
요 새로운 배열(Info로 선언)을 setData에 넣어줌으로써, data State를 업데이트!
버튼을 처음 누르면 설정해준 초깃값이,
두 번 누르면 우리가 의도한 10명의 username이 반환된다. 성공!
→ 근데 맨 처음 눌렀을 때부터 10명의 정보가 나와야 하지 않나?
onClick 이벤트가 발생하는 순간, State를 업데이트하는데... 왜 두 번 눌러야 업데이트된 것처럼 보일까?
해답을 알기 위해... 앱 렌더링 시 App render라는 글귀와 data State를 console에 찍어줬다!
아까와 마찬가지로 setData(Info) 이후에도 똑같이 data State를 console에!
그 결과는...
띠용! 이것이 어떤 뜻인고 하니...
앱이 렌더링 된 이후(버튼 클릭 후) data State는 정상적으로 10개가 업데이트 됐다!
하지만 정작 setData(Info) 바로 밑의 console.log(data)는 초깃값만 찍히는 모습!?
왜냐...하면 JS는 기본적으로 렌더링 될 때 코드 속 모든 함수를 실행시켜 가지고 있는 상태다!
console.log(data) 역시 마찬가지!
따라서 setData(Info)를 하고 console.log(data)를 실행해도,
setData(Info)를 통한 State 업데이트가 완료되기 전에 console.log(data)가 실행이 돼버리며,
이때의 data는 우리가 정해준 초깃값이기 때문에 저렇게 뜨고 마는 것!
(이것이 바로 놀랍고도 신비한 호이스팅의 세계)
'source-code > React' 카테고리의 다른 글
| Custom Hooks (0) | 2021.03.31 |
|---|---|
| Insta 클론 코딩 _ 자잘자잘 에러 해결 (0) | 2021.03.29 |
| 리액트를 다루는 기술 _ 22장 (0) | 2021.03.24 |
| 리액트를 다루는 기술 _ 21장 (0) | 2021.03.23 |
| 리액트를 다루는 기술 _ 19장, 20장 (0) | 2021.03.23 |
