---

React에서 배열을 담은 JSON 파일과 객체를 담은 JSON 파일을 불러오는 방법에 대해서 알아봅시다.
데모 코드 버튼을 눌러 글에서 사용된 코드와 페이지를 확인할 수 있습니다.

데모 코드

준비물

• Axios, Fetch, XMLHttpRequest를 필요로하지 않습니다.
• JSON.parse 함수를 필요로하지 않습니다.
• 데이터를 불러올 로컬 JSON 파일
• JS ES6의 map() 함수

폴더 구조

1단계.

로컬 JSON 파일을 import문을 통해 불러옵니다.

import를 하게 되면 자동으로 JSON.parse 함수가 적용된 것 처럼 동작합니다.
즉, arrayData와 objectData는 각각 object 타입을 가지며 불러온 값을 가지게 됩니다.

2단계.

배열을 담은 JSON 파일의 데이터에 접근할 때는 map() 함수를 이용합니다.

위 코드는 arrayData 배열의 각 원소를 통해 리스트 아이템( li )을 만드는 코드입니다.
React에서 Array나 Iterator의 각 원소에는 key 속성을 부여해주어야 하는 것을 잊지 마세요! 각 원소의 key는 고유해야합니다. 그러므로 배열의 index를 key로 사용하는 것이 적절하겠죠?

map() 함수는 배열의 원소를 연산한 결과를 모아 새로운 배열을 만드는 함수입니다.
forEach(), every() 같은 다른 배열 함수를 사용할 수도 있지만 map() 함수가 사용하기 가장 편합니다. 더 자세한 사항은 이곳을 확인해주세요.

객체를 담은 JSON 파일의 데이터에 접근할 때는 자바스크립트 객체와 똑같이 이용하면 됩니다.

이 때, 객체의 구조 분해 할당(Destructuring)을 이용하면 가독성 높게 코드를 작성할 수 있습니다.

왜 Axios, Fetch, XMLHttpRequest를 이용하지 않나요?

Axios, Fetch, XMLHttpRequest는 서버로부터 데이터를 받기 위한 함수(라이브러리)입니다. 하지만 우리는 로컬에 있는 JSON 파일을 불러오고 싶은 것이기 때문에 위의 요소들은 요구사항과 맞지않습니다. 로컬이 아닌 서버로부터 JSON 파일을 받기 위해서는 Axios, Fetch, XMLHttpRequest를 이용해야 합니다.

map() 함수를 이용하는 이유는 무엇인가요?

map() 함수는 ES6에 등장한 배열 함수입니다. 다른 함수를 이용해도 좋지만 map() 함수가 가장 쉽고 간편하게 사용할 수 있습니다. 다른 배열 함수들도 다른 부분에서 유용하게 사용할 수 있으니 한 번 익혀보는 것도 좋을 것 같습니다.

마치며

지금까지 React에서 로컬 JSON 파일을 불러오는 방법에 대해 알아보았습니다. 궁금하거나 잘못된 내용이 있다면 댓글을 통해 알려주시면 빠르게 답변해드리도록 하겠습니다.