개발자
React json load error
Data.json을 아래와 같이 설정하고 [ {"id": 1, "name": "kim", "age": 30}, {"id": 2, "name": "lee", "age": 25}, {"id": 3, "name": "park", "age": 35} ] 리액트 app.js에서 json을 불러 출력하려고 하면 아래와 같은 에러가 나와요 SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON 아무리 검색해도 해결법을 못찾겠어서 글 올립니다ㅠㅠ 아래 스크립트는 app.js 작성한 내용입니다 ㅠ
1import React, { useState, useEffect } from 'react';
2
3function App() {
4 const [data, setData] = useState(null);
5
6 useEffect(()=>{
7 fetch("./data.json")
8 .then(response => response.json())
9 .then(data => setData(data))
10 .catch(error => console.error('error:', error))
11 }, [])
12
13 return (
14 <div>
15 <h1>데이터 출력 예제</h1>
16 {data ? (
17 <ul>
18 {data.items.map(item => (
19 <li key={item.id}>{item.name}{item.age}</li>
20 ))}
답변 2
인기 답변
안녕하세요 작성 글에 답변 드립니다. 😏 1. 먼저 질문 글을 올리실 때는 작성한 json 파일이나 풀 코드를 올리시는 게 맞습니다. 2. 당장 보이는 것으로 jsx 내부에 data.items가 있는데 data 자체를 console.log로 찍어보시기 바랍니다. 적어주신 json에서 items가 어디서 나왔는지도 확인 해보시는 게 좋을 듯 합니다. 3. 작성 글을 ChatGPT에 넣으면 다음과 같이 상세하게 다음을 찾아가는 길을 제시해줍니다. 배우는 단계에서 적극적으로 활용을 추천 드립니다. 이하 chatgpt 제시하신 문제는 주로 웹 개발에서 흔히 발생하는 문제 중 하나입니다. 문제의 핵심은 fetch 함수를 사용하여 로컬의 data.json 파일을 불러올 때 발생하는 문제로 보입니다. SyntaxError: Unexpected token '<' 오류 메시지는 대개 잘못된 경로나 설정으로 인해 예상했던 JSON 파일 대신 HTML 문서(보통은 404 Not Found 페이지)가 반환되었음을 나타냅니다. 이를 해결하기 위한 몇 가지 단계를 제안드립니다. 정확한 파일 경로 확인: fetch("./data.json") 호출이 올바른 위치에서 data.json 파일을 찾을 수 있도록 하십시오. 프로젝트의 루트 디렉토리나 public 디렉토리 내에 data.json 파일이 위치해 있는지 확인하십시오. 웹 서버 실행 여부 확인: 로컬 파일 시스템에서 직접 HTML 파일을 열 경우 fetch가 로컬 파일에 접근하지 못할 수 있습니다. 따라서, Create React App과 같은 개발 서버를 사용하고 있을 경우, 서버가 실행 중인지 확인하십시오. JSON 파일의 유효성 검증: JSON 파일이 올바르게 형식화되어 있는지 확인하십시오. 제공하신 JSON 예제는 유효해 보이지만, 실제 파일에서 문제가 없는지 다시 한번 확인해 보시기 바랍니다. App 컴포넌트 코드 수정: 제공하신 코드를 보면, data.items.map(...) 부분이 있는데, 이는 data.json의 구조와 일치하지 않습니다. data.json 파일에는 items라는 필드가 없으므로, 이 부분을 data.map(...)으로 수정해야 합니다.
안녕하세요! data.json 파일의 주소가 잘못되서 response.json() 실행했을 때 에러 발생되는 것으로 보입니다. data.json의 정상적인 주소를 찾아서 사용하시는 게 좋을 것 같아요! data.json의 주소를 브라우저에서 접속되는지 확인해보거나 개발자 도구에서 네트워크 탭에서 확인해보세요 :)
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 02월 15일
React에서 로컬 JSON 파일을 불러올 때는 상대경로 대신에 `public` 폴더를 기본 경로로 사용해야 합니다. 리액트 앱의 새로운 인스턴스를 생성하면, `public`이라는 폴더가 생성됩니다. 이 폴더 내부에 있는 모든 파일은 서버를 통해 정적으로 제공됩니다. 따라서, 먼저 JSON 파일을 이 `public` 폴더 안으로 옮긴 후 fetch 함수를 사용할 때 `'/data.json'` 을 경로로 넘겨주시면 됩니다. 즉 아래와 같이 수정하시면 될 것 같습니다: ```javascript useEffect(()=>{ fetch("/data.json") .then(response => response.json()) .then(data => setData(data)) .catch(error => console.error('error:', error)) }, []) ``` 그리고 출력 부분에서 `{data.items.map(item => (` 이 부분을 `{data.map(item => (` 으로 변경해 줍니다. 왜냐하면 items 프로퍼티는 존재하지 않아서 그렇습니다. 수정된 코드를 아래에 첨부합니다: ```javascript import React, { useState, useEffect } from 'react'; function App() { const [data, setData] = useState(null); useEffect(()=>{ fetch("/data.json") .then(response => response.json()) .then(data => setData(data)) .catch(error => console.error('error:', error)) }, []) return ( <div> <h1>데이터 출력 예제</h1> {data ? ( <ul> {data.map(item => ( <li key={item.id}>{item.name}{item.age}</li> ))} </ul> ) : ( "Loading..." )} </div> ); } export default App; ``` 이렇게 수정하신 후에도 문제가 계속되면, 웹 서버를 재시작해보세요. 여전히 문제가 있다면, JSON 파일이 올바르게 formatted 되었는지 확인하세요. Json formatter나 Json validator 같은 툴을 사용하실 수 있습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!