[ React ] Uncaught TypeError: users.map is not a function 오류 해결 방법

💥 Chrome 개발자 도구에서 발생한 에러 메시지

Uncaught TypeError: users.map is not a function

 

❓에러 발생 이유

JavaScript의 map 메서드는 Array 타입의 변수를 대상으로 실행되는 함수입니다.
하지만 Array 타입이 아닌 자료형의 변수를 대상으로 해당 메서드를 사용할 경우에 나타나는 오류 메시지입니다.

 

👉 React의 렌더링 흐름

아래 코드에서 console.log를 통하여 users를 출력해 보겠습니다.

import React, { useEffect, useState } from "react";

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

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((users) => setUsers(users))
      .catch((error) => console.error("Error fetching users:", error));
  }, []);
  
  console.log("users : ", users); // users :  Array(10)

  return (
    <div>
      {
      	users.map((user) => <li key={user.id}>{user.username}</li>)
      }
    </div>
  );
}

export default UserPage;

 

우리가 기대한 users의 값은 Array 타입의 데이터입니다.

하지만 users의 값이 없는걸 아래 이미지에서 확인할 수 있습니다.

 

그러한 이유는 React의 초기 렌더링 단계에서 API 호출을 진행하였지만, JS의 비동기 처리 특성 때문에

API 호출이 정상적으로 완료되기 전에 렌더링이 완료되어 users의 값이 변경되지 못하여 나타나는 현상입니다.

아래 그림을 참고해 주세요.

 

그렇기 때문에 API가 정상적으로 호출이 완료되는 시점에 React 렌더링을 완료 시켜주어야 합니다.

아래 그림을 참고해 주세요.

 

✅ 해결 방법

아래 예시 코드에서 이전 코드는 해당 오류 메시지를 나타냅니다.
여기서 간단하게 오류를 해결하는 방법은
users이 빈 문자열(""), null, undefined가 아닐 때만 렌더링 하는 조건을 추가해 줍니다.
즉,  users &&이라는 조건문을 추가하면 됩니다.
수정 코드를 참고해 주세요.

 

예시 코드

이전 코드

import React, { useEffect, useState } from "react";

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

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((users) => setUsers(users))
      .catch((error) => console.error("Error fetching users:", error));
  }, []);

  return (
    <div>
      {
      	users.map((user) => <li key={user.id}>{user.username}</li>)
      }
    </div>
  );
}

export default UserPage;

 

수정 코드

import React, { useEffect, useState } from "react";

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

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((users) => setUsers(users))
      .catch((error) => console.error("Error fetching users:", error));
  }, []);

  return (
    <div>
      {
        users && // 조건 추가
        users.map((user) => <li key={user.id}>{user.username}</li>)
      }
    </div>
  );
}

export default UserPage;

 

✔️ 에러 발생 시 체크 리스트

• map 메서드를 사용하고 있는 변수가 Array 타입의 변수인지를 확인해 봅니다.
• 렌더링 되는 시점에 해당 변수의 값이 빈 문자열(""), null, undefined가 아닐 때만 렌더링 하는 조건문이 있는지 확인해 봅니다.