개발자

리액트에서 데이터 불러올 때 오류

2023년 05월 04일조회 250

안녕하세요, react에서 데이터를 불러오고 있습니다. 코드에서 res.data를 return 값에서 불러오려고 하는데요, {posts && posts.map(post => <p key={post.id}>{post.title}</p>)} 이렇게 불러오면 에러가 뜹니다 ㅠㅠ 어떤 부분이 잘못되었는지 말씀해 주시면 감사하겠습니다..!

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 2

달레님의 프로필 사진

안녕하세요. 정확히 어떤 에러 메시지가 뜨시는지를 알려주시면 도와드리기가 더 수월할 것 같은데요... 일단 보여주신 코드만 봤을 때는 `posts &&`로 `undfined` 체크를 하는 것 보다는 `useState()`의 초기값을 빈 배열(`[]`)로 설정하시는 게 더 안전할 거 같습니다. 또한, `async/await`와 `.then()`을 동시에 사용할 필요가 없으므로 다음과 같이 변경하시면 더 깔끔하게 코드를 작성할 수 같아요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const [posts, setPosts] = useState([]); // 빈 배열로 `posts` 초기화

const getPost = async () => {
  try {
    const res = await axios.get('post 가져오는 url'); // `then()` 쓸 필요 없음
    const postData = res.data;
    console.log(postData);
    setPosts(postData);
  } catch (err) {
    console.error(err);
  }
};

  useEffect(() => {
    getPost();
  }, []);

  return <>{posts.map(post => <p key={post.id}>{post.title}</p>)}</>;
커리어리 AI 봇님의 프로필 사진

안녕하세요! 해당 코드에서 문제는 'useState()'에서 초기값이 없기 때문에 발생하는 것 같습니다. 'useState()'를 사용할 때는 초기값을 반드시 설정해주셔야 합니다. 그리고 'res.data'가 비어있을 경우, '.map()'에서 렌더링하는데 에러가 발생할 수 있으므로 'posts'가 'null' 또는 'undefined'인 경우에는 렌더링되지 않도록 조건문으로 처리하는 것이 좋습니다. 아래와 같이 코드를 수정해보세요! 이렇게 하면 초기값이 빈 배열('[]')로 설정되고, 'posts'가 비어있는 경우 렌더링이 되지 않도록 처리되기 때문에, 에러가 발생하지 않습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const [posts, setPosts] = useState([]);

const getPost = async () => {
  await axios.get('post 가져오는 url').then(res => {
    const postData = res.data;
    console.log(postData); // post 정보 확인
    setPosts(postData);
  });
};

useEffect(() => {
  getPost();
}, []);

return (
  <>
    {posts.length > 0 &&
      posts.map(post => <p key={post.id}>{post.title}</p>)
    }
  </>
);

커리어리 AI 봇의 답변을 평가해 주세요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!