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

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

1const [posts, setPosts] = useState([]); // 빈 배열로 `posts` 초기화
2
3const getPost = async () => {
4  try {
5    const res = await axios.get('post 가져오는 url'); // `then()` 쓸 필요 없음
6    const postData = res.data;
7    console.log(postData);
8    setPosts(postData);
9  } catch (err) {
10    console.error(err);
11  }
12};
13
14  useEffect(() => {
15    getPost();
16  }, []);
17
18  return <>{posts.map(post => <p key={post.id}>{post.title}</p>)}</>;

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

1const [posts, setPosts] = useState([]);
2
3const getPost = async () => {
4  await axios.get('post 가져오는 url').then(res => {
5    const postData = res.data;
6    console.log(postData); // post 정보 확인
7    setPosts(postData);
8  });
9};
10
11useEffect(() => {
12  getPost();
13}, []);
14
15return (
16  <>
17    {posts.length > 0 &&
18      posts.map(post => <p key={post.id}>{post.title}</p>)
19    }
20  </>
21);