비동기 통신에 있어서 질문남깁니다.(코드첨부)

1. 초기 lists는 빈 배열로 할당이 됩니다.

(const [lists, setLists] = useState([]);로 인해서)

이 부분의 접근은 아주 좋습니다!

처음 답변에서 제대로 확인하지 못한 부분, 추가설명 드리겠습니다.

먼저, 접근할 때

1. 상태 초기화

2. 초기화된 상태로 렌더링

3. Effect 발생

4. Effect 또는 Event로 인한 setState

5. setState로 인한 업데이트 발생

6. 업데이트된 상태로 렌더링

이런 흐름을 인지하시는 것이 중요합니다. 이에 맞춰서 다음을 살펴보겠습니다.

최초 상태가 []일 때는 data라는 프로퍼티가 없는 상태입니다.

const lists = []

console.log(lists.data)

를 해보시면 undefined를 출력하는 것을 보실 수 있습니다.

즉 lists.data는 최초 빈 배열일 때 undefined인 상태입니다.

그렇다면 lists.data.map은 undefined.map을 한 것이나 마찬가지가 됩니다!

이 부분을 예외 케이스로 사용하기 위해 분기 처리를 잘 해주셨습니다! 

다만 왜 저렇게 되는지는 위에 언급한 접근 순서 부분을 이해하시면 더 좋을 것 같아요!

그리고 아마 [{},…,{}]가 바로 들어오는 것이 아닌 {data:[{},…,{}]} 형식으로 받아오게 될 것입니다. 이 부분이 lists에 넣어지게 되는 것이고요!

이때 setLists(result)를 실행하면 이때 다시 한번 렌더링이 됩니다.

이제야 원하는 형태인 lists.data.map을 실행할 수 있게 되는 것이죠!

흐름은 이렇습니다.

  1. 최초 데이터 초기화(lists는 [])

  2. 초기화된 데이터를 통해 렌더링(lists가 []일 때)

  3. 렌더링이 되고 useEffect 실행

  4. setLists로 인해 lists가 {data:[{},…,{}]} 형식으로 바뀜

  5. 바뀐 상태(lists.data.map)를 통해 렌더링 진행

핵심은 "state가 어떤 값을 가졌는지 파악하지 못한 상태로 사용하고 있었다" 입니다!

- 초기에 데이터를 다 불러오지 못했을 때

- 에러가 났을 때

- 잘 불러와졌을 때

해당 부분 3가지를 언급해주셨는데 좋은 접근입니다. 강의에서 안내된 

 const [error, setError] = useState(null);

 const [isLoaded, setIsLoaded] = useState(false);

 const [lists, setLists] = useState([]);

코드가 언급해주신 부분을 state로 나타내고 있는 것이지요.

리액트에서는 이런 부분을 상태를 가지고 핸들링합니다!

조금 더 넓은 범위에서 리액트 또는 JS 애플리케이션 관점에서 들여다보면, 

"상태가 어떻게 초기화될 것인지, 상태가 어떻게 바뀔 것인지" 고려하면서 진행하면 좋을 것 같습니다. 

감사합니다.

안녕하세요. 제주코딩베이스캠프입니다.

'http://localhost:8080/todos' 로 적힌 데이터의 구조를 알 수 없어, 다른 api로 테스트를 해보았으나,

별다른 문제를 파악하지 못하였습니다!

'http://localhost:8080/todos' 로 적힌 해당 주소가 올바른지 확인하시고,

맞다면 불러오는 데이터 구조 파악 및 객체의 프로퍼티에 올바르게 접근하고 있는지 확인 부탁드립니다!

     <ul> {lists.data.map(list => <li key={list.id}> ... </li>)} </ul>

기존 교안에서는 lists의 data에 접근하여 출력하는 것이라 확인 후 구조에 맞게 수정해주셔야 할 듯 합니다.

혹시 해당 문제가 해결되지 않으신다면 전체 코드 및 실행환경을 공유해주세요.

감사합니다.