문제상황
어쩔 수 없는 문제상황이긴 했지만, 비동기 함수에서의 문제가 발생했다.
Async로 axios로 받아오는 함수가 비동기로 돌아가면서,
그 전에 렌더링되었고 이때 당연히 초기값이 null 값이기 때문에,
밑에 렌더링 파트에 있는 Map 함수에서 이게 돌아가지 않기 때문에 Error 가 반환되었고, 이 때문에 비동기동신 함수 자체가 마무리 되기 전에 error발생으로 렌더링 종료가 되었다.
해결방법
아마도 이건 프론트엔드의 숙명적인 문제인 점 같은데,
모든 통신이 완벽하게 성공할꺼라는 생각을 하면 안된다고 한다.
그러기 때문에 로더가 있는 거고,
서버에서부터 데이터 값을 가져올때(초기 값 null -> 서버의 값으로 change)
그 gap 동안에 처리해줄 무언가가 필요하다는 점을 알게 되었다.
총 세가지의 방법이 있는데,
(1) 옵셔널체이닝
(2) 초기값 세팅
(3) 에러처리 방법
이 세가지 방법으로 에러를 처리할 수 있다.
(3)의 방법은 앞으로 배울 THUNK에서 설명할 예정이니 pass
(1)
옵셔널 체이닝은 ? 앞의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환하는 것이다.
즉, undefined로 진행하는것이 아니라, undefined로 return하고 평가를 멈추는 행위인 것이다.
그 뒤의 연산은 진행되지 않는 것이다.
처음에는 초기값인 null값이 todos라는 state에 입력 받아서 map함수로 입력되지만,
그전에 ? 가 옵셔널 체이닝을 받기 때문에, null값 그대로 return 하고 콘솔을 찍는 것이다.
그 후
async 비동기 통신이 마무리 되면서 todos라는 state에 서버값이 들어오면서 todos는 map함수를 돌릴 수 있는 배열 형태가 되었고,
useEffect함수가 해당값이 들어왔기 때문에 리렌더링이 되면서, 해당 배열이 map 함수를 통해 뿌려지게 되는 것이다.
(2)
초기값 세팅을 잘해두면 걱정해둘께 없는데,
애초에 초기값을 서버의 데이터형과 맞춰서 세팅한다면,
map함수가 렌더링 할때 어차피 배열이기 때문에 에러를 뱉어내면서 평가 중단하진 않는다.
그 후 비동기통신이 완료되면서 useEffect로 리렌더링되면서 제대로된 서버의 값이 들어오게 되는 것이다.
