[React.js] fetch로 받은 데이터 map() 에러

동적 라우팅 강의를 보다가

동적 라우팅 강의를 보며 코드를 따라 치다 문제가 되는 부분이 생겼습니다.

fetch를 사용해서 users 데이터를 데려온 뒤, map으로 뿌려주는 형태였는데, users 패치가 완성 되기 전 map으로 뿌리는 렌더링을 먼저 실행해서, undefined에 map() 메서드를 실행하려 하니 에러가 뜨고 더 이상 리렌더링도 진행되지 않았습니다.

import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';

function List() {
  const [users, setUsers] = useState();

  try {
    useEffect(() => {
      fetch('https://reqres.in/api/users/')
        .then(res => res.json())
        .then(result => {
          console.log(result);
          setUsers(result.data);
        });
    }, []);
  } catch (error) {
    console.warn('패치 에러 ');
  }

  return (
    <section className="list">
      <h1>List 페이지!!!</h1>
      <nav>
         {/* {users.map(({ id, first_name, email, avatar }) => ( */}
        {users &&
          users.map(({ id, first_name, email, avatar }) => (
            <Link key={id} to={`/post/${id}`}>
              <p>
                <strong>{first_name}</strong>
              </p>
              <p>{email}</p>
              <img alt="avatar" src={avatar} />
            </Link>
          ))}
      </nav>
    </section>
  );
}
export default List;

해결법

해결 방법은 users && 라는 코드를 map쓰는 부분 앞에 추가해주어, users 가 존재할 때만 map()함수를 돌리도록 변경하니 해결이 되었습니다.

처음 생각했던 것은 fetch가 끝나고 나면 setState가 실행되니 리렌더링이 될것으로 생각했습니다.
하지만 undefinded에 map함수를 사용해버리니 리렌더링도 안되는 먹통상태가 되어 문제가 생겼었던거였습니다.
그걸 users && 라는 처리를 통해 users 데이터가 있을 때만 map함수가 실행되도록 변경해 해결했습니다.

끝~!