리액트 axios로 json 가져올 때 궁금한 게 있습니다.

Question

퍼블리셔로 2년 좀 안 되게 일했고그마저도 HTML CSS 제이쿼리정도만쓰는 작업을 반복하다보니자스나 리액트를 너무 몰라서며칠전부터 공부중인 사람입니다ㅠㅠ혼자 MockData를 Json파일로 만들어서상품리스트로 불러오는 걸 해보는중인데요상품리스트를 맵으로 돌려서 나타나게 할 생각이지만 그 전에 먼저 쉬운단계인(?) 각각 div를 만들고 하나씩 넣어보는 작업을 먼저 해보았습니다.처음 위처럼 커피라는 카테고리 하나만Json으로 만들어서 useState setData에data.coffee를 입력하고 실행하였더니정상적으로 화면에 뿌려졌습니다.헌데 아래처럼 Json 카테고리를 커피 외에여러 개를 만들어서 불러오려고 하니이런저런 시도를 해도 감이 안 잡힙니다ㅠㅠ위처럼 카테고리가 1개 이상일경우setData()를 coffee만 잡아서는 안 되니우선은 data만 입력을 해두었는데저 부분과 각 div태그에서의 data[0].제이슨이 부분을 어떻게 해야 정상적으로 실행이 될지감이 안 옵니다 ㅠㅠㅠㅠ현재 Json의 구조가 위처럼 짜여지는 것 같은데혹시 방법을 좀 알 수 있을까요.

yeoyeong · Answer

data를 불러오기 전에 랜더링을 해서 그런거같아요 {data && data[0].product.image}

nubie · Answer

data 상태 변수에 값을 담았으니까 data.map() 함수를 이용해서 반복적으로 컴포넌트를 생성시켜주면 됩니다 data.map((d)=>{ return

{d.product_name}

})이런식으로 하시면 되는데.. 이런식으로 하시는 것보다 js와 리액트 공부를 병행 하면서 하시는게 편하실 거에요

Brian.P · Answer

에러가 뜨는 이유는 랜더링 시점과 비동기에 대한 지식을 조금 더 공부하면 될 것 같습니다.배열을 리액트에 표시하는 것은 리액트 공식문서나https://ko.javascript.info/array-methods다음문서 참고하시면 될 것 같구요JS 공부랑 리액트 공식문서 같이 읽어보시는게 더 큰 도움 되실거에요

리액트 axios로 json 가져올 때 궁금한 게 있습니다.

3개의 답변

기술 목록