React MUI 동적 Select

fetch 혹은 axios 를 사용하여 back단에서 받아온 data 를

react에 적용하기위해서는 어떻게 해야할까 ?

back에서 가져온 data (Json 형태에 Array) 를 사용하기위해서는 {} 안에 js code를 사용해야한다.

라고 생각하고 처음에 작성했던 코드는

data.map(item=>{<MenuItem input = item.val>}) 이런식으로 작성했는데 이상하게 select에 나오는 값들이 Object 라고 나온것이다.

이유는 다음과 같다. map함수로 불러낸 태그들을 ()로 감싼것이아닌 {} 로 감싼것. 따라서 ()로 바꿔주고 돌려보니 이젠 다른 에러가 난다.

이유는 모르겟으나. value가 빈값일경우 (null, undefined) error 가 발생하는것이다. 따라서 MenuItem에 빈값을 가지고있는 MenuItem을 하나 넣어주어야한다.