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

안녕하세요. 정확히 어떤 에러 메시지가 뜨시는지를 알려주시면 도와드리기가 더 수월할 것 같은데요... 일단 보여주신 코드만 봤을 때는 `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>)}</>;

안녕하세요! 해당 코드에서 문제는 '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>)
    }
  </>
);