useEffect + ajax요청 오류

[나님코딩등장]

function App() {

let [수량, 수량변경]= useState(["안녕","하세요","저는"]);
let [차트정보,차트정보변경] = useState([]);

useEffect(()=>{

axios.get("https://btl831.github.io/example1.json")
.then((result)=>{console.log(result.data); 차트정보변경(result.data)})
.catch();

},[]); 해서 

 

개발자도구로 보면 console 에 로그로 잘 넘오는데 해당 js 에서 {차트정보[0].singer} 처럼 차트정보를 변수로 사용하려는 순간 랜더가 되지않고 오류가 뜹니다. 어떻게 된것일까요....? 그래서 props사용도 불가합니다... 정보가 잘 오는거 같긴한데...

[codingapple]

컴포넌트가 로드될 때

차트정보라는 state에는 아직 아무것도 안들어있어서 차트정보[0].singer 하면 에러가 나는 것입니다

ajax 요청은 컴포넌트 로드되고 한참 있다 완료되니까요 

차트정보.length가 0이 아니면 보여달라는 조건문을 쓰거나 map 반복문을 써봅시다 

[나님코딩등장]

그럼 선생님 말대로했을경우 차트정보가 0이면 로딩창을 보여주고 1개라도 생기면 그때 페이지를띄울려고하면 삼항 연산자로 모든 앱을 묶으면 될까요...? 

[나님코딩등장]

아니면 useEffect 에서 처리를해야할까요.. 앞에 말한것처럼 모든걸 삼항연산자로 묶어야할까요..? ajax 요청이 완료될때까지 페이지를 띄우지않으려고 합니다!

[codingapple]

로딩중 표시는 html 부분 안에 조건문으로 적으면 됩니다

모든걸 다 묶으면 사이트가 뭔가 느려보이니까 상품목록 부분만 if문으로 묶도록 합시다 

[나님코딩등장]

감사합니다

[글쓴이]

글