[React] REST API, AXIOS로 받아온 Array 객체를 map함수 호출이 불가능할때

[React] REST API, AXIOS로 받아온 Array 객체를 map함수 호출이 불가능할때

이 글에서는 React를 사용하여 REST API로부터 Axios를 통해 데이터를 받아올 때 발생하는 배열(Array) 객체의 map 함수 호출 오류에 대해 상세히 설명하고, 이를 해결하는 간단하면서도 효과적인 방법을 소개하고자 합니다. 특히 비동기 데이터 처리와 관련하여 Promise 객체가 해결되기 전에 컴포넌트가 렌더링되어 발생하는 오류의 원인과 해결책을 중점적으로 다루며, 로딩 상태 관리 및 조건부 렌더링을 활용한 접근법에 대해 이야기합니다.

---

도입부

React를 사용하면서 서버로부터 데이터를 받아와 렌더링하는 과정은 매우 일반적입니다. 많은 개발자들이 Axios를 사용하여 REST API와 통신하며 데이터를 받아오는데, 이 때 종종 겪게 되는 문제가 바로 "map 함수 호출이 불가능하다"는 에러입니다.
예를 들어, 서버로부터 받은 데이터가 배열이어야 하는데, 컴포넌트 내부에서 해당 배열에 대해 map 함수를 호출할 때 에러가 발생하는 경우가 있습니다. 이는 데이터가 아직 비동기 처리 중일 때 해당 변수의 값이 null 또는 Promise 객체로 존재하기 때문입니다.

제가 처음 이 문제에 직면했을 때, formdata가 정상적으로 저장되는 것을 확인했지만, div 안에서 해당 객체를 꺼내 쓰려니 map 함수 호출 시 “Cannot read property 'map' of null” 혹은 “map is not a function”과 같은 에러가 발생했습니다. 이는 데이터가 아직 완전히 로드되기 전에 컴포넌트가 렌더링되어 데이터 타입이 예상과 다르게 나타나는 문제였습니다.

실제로, API 호출을 위한 Axios 요청은 비동기적으로 이루어지며, 데이터가 반환되기 전에 컴포넌트가 렌더링될 수 있습니다. 이때, 만약 데이터가 null이거나 아직 Promise 객체로 남아있다면, JavaScript에서 제공하는 Array.prototype.map 함수는 호출이 불가능한 상태가 되어 오류가 발생하게 됩니다.

이 문제를 해결하기 위해서, 로딩 상태를 관리할 수 있는 방법이 필요했습니다. 저는 이에 대해 간단한 해결책을 생각해냈습니다. 바로, 컴포넌트 내부에 로딩 상태를 나타내는 state 변수를 생성하고, API 호출이 완료되면 해당 state를 업데이트하여 조건부 렌더링을 구현하는 방식입니다.

---

문제 상황과 원인 분석

React에서 데이터를 받아오는 과정은 다음과 같이 이루어집니다:

1. 컴포넌트 마운트 시 데이터 요청
   컴포넌트가 마운트될 때, useEffect 훅을 사용하여 Axios를 통해 서버에 요청을 보냅니다. 이 때, Axios는 Promise 객체를 반환합니다.
2. 비동기 데이터 처리
   비동기 함수(async/await)를 사용하여 데이터를 받아오면, 데이터가 완전히 받아지기 전까지는 해당 변수에 초기값(null 또는 빈 배열 등)이 할당됩니다. 만약 초기값이 null이라면, map 함수를 호출할 수 없기 때문에 에러가 발생합니다.
3. 렌더링 시점 문제
   데이터가 완전히 로드되기 전에 컴포넌트가 렌더링되어, 아직 값이 할당되지 않은 상태의 변수에 대해 map 함수를 호출하는 순간 오류가 발생합니다.

예시 코드 분석

아래는 문제 상황을 재현한 간단한 예시 코드입니다:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function DataList() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data); // response.data가 배열이라고 가정
      } catch (error) {
        console.error('데이터를 불러오는 중 오류 발생:', error);
      }
    }
    fetchData();
  }, []);

  return (
    <div>
      {/* data가 null인 경우 map 함수를 호출할 수 없으므로 에러 발생 */}
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

export default DataList;

위 코드에서는 초기 상태로 data를 null로 설정했기 때문에, 컴포넌트가 처음 렌더링될 때 data.map()을 호출하려고 하면 “Cannot read property 'map' of null” 에러가 발생합니다. 이 문제는 데이터가 완전히 로드되기 전까지 적절한 로딩 상태를 확인하지 않았기 때문에 발생합니다.

---

해결 방법: 로딩 상태 관리와 조건부 렌더링

문제를 해결하는 가장 직관적인 방법은 데이터 로딩 상태를 관리하는 별도의 state 변수를 사용하는 것입니다. 이를 통해 데이터가 완전히 로드된 이후에만 map 함수를 호출하여 렌더링할 수 있도록 할 수 있습니다.

로딩 상태 변수 추가

먼저, 로딩 상태를 나타내는 showList라는 state 변수를 생성합니다. 초기값은 false로 설정합니다.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function DataList() {
  const [data, setData] = useState([]);
  const [showList, setShowList] = useState(false);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data); // response.data가 배열이어야 함
        setShowList(true); // 데이터 로딩이 완료되었음을 나타냄
      } catch (error) {
        console.error('데이터를 불러오는 중 오류 발생:', error);
      }
    }
    fetchData();
  }, []);

  return (
    <div>
      {/* 로딩 상태에 따라 조건부 렌더링 */}
      {showList ? (
        data.map(item => (
          <div key={item.id}>{item.name}</div>
        ))
      ) : (
        <div>데이터를 불러오는 중입니다...</div>
      )}
    </div>
  );
}

export default DataList;

이 코드에서는 데이터가 성공적으로 받아지면 setShowList(true)를 호출하여 로딩 상태를 변경합니다. HTML 부분에서는 삼항 연산자를 사용하여, showList가 true일 때만 배열 데이터의 map 함수를 호출하고, 그렇지 않은 경우에는 “데이터를 불러오는 중입니다...”라는 메시지를 렌더링합니다.

개선 사항 및 추가 고려사항

1. 초기값 설정
   배열 데이터의 초기값을 null 대신 빈 배열([])로 설정하면, 조건부 렌더링 없이도 기본적으로 map 함수를 호출할 수 있습니다. 그러나 이 경우에도 데이터가 비어 있을 때 사용자에게 로딩 상태를 명확히 전달하는 것이 중요합니다.
2. 에러 핸들링
   API 호출이 실패했을 경우를 대비하여 에러 상태를 관리하는 state 변수를 추가하는 것도 좋습니다. 이를 통해 사용자에게 오류 메시지를 보여줄 수 있습니다.
3. 로딩 컴포넌트 활용
   단순한 텍스트 대신 스피너(spinner)나 애니메이션을 사용하여 로딩 상태를 시각적으로 표시할 수 있습니다. 예를 들어, 별도의 로딩 컴포넌트를 만들어 조건부 렌더링하면 사용자 경험을 향상시킬 수 있습니다.

아래는 개선된 예시 코드입니다:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Spinner from './Spinner'; // 로딩 컴포넌트 예시

function DataList() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data); // response.data는 배열이어야 함
      } catch (error) {
        setError(error);
        console.error('데이터를 불러오는 중 오류 발생:', error);
      } finally {
        setLoading(false); // API 호출이 끝나면 로딩 상태를 false로 변경
      }
    }
    fetchData();
  }, []);

  if (loading) {
    return <Spinner />; // 로딩 중인 경우 스피너를 렌더링
  }

  if (error) {
    return <div>데이터를 불러오는데 실패했습니다. 다시 시도해 주세요.</div>;
  }

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

export default DataList;

이와 같이 로딩, 에러, 데이터 상태를 세분화하여 관리하면, 비동기 데이터 처리와 렌더링 간의 타이밍 문제로 인한 오류를 효과적으로 방지할 수 있습니다.

---

비동기 처리와 Promise 객체 이해하기

React에서 데이터를 받아올 때 흔히 겪는 문제는 바로 Promise 객체와 관련된 것입니다. Axios와 같은 HTTP 클라이언트 라이브러리는 API 호출 시 Promise를 반환합니다. Promise는 비동기 작업의 완료나 실패를 나타내는 객체로, 데이터가 완전히 도착하기 전에 해당 객체가 존재하게 됩니다.

Promise 객체의 특징

• 대기 상태(Pending)
  Promise가 생성된 직후에는 아직 값이 결정되지 않은 상태입니다. 이 때는 null 혹은 undefined와 유사한 상태로 간주할 수 있으며, 데이터를 사용할 준비가 되어 있지 않습니다.
• 이행 상태(Fulfilled)
  API 호출이 성공적으로 완료되면, Promise는 이행 상태가 되어 실제 데이터 값을 반환합니다.
• 거부 상태(Rejected)
  API 호출 중 오류가 발생하면, Promise는 거부 상태가 되어 에러 객체를 반환합니다.

이러한 Promise의 비동기 특성 때문에, 데이터가 완전히 받아지기 전에 컴포넌트가 렌더링되는 경우가 발생할 수 있습니다. 이로 인해 초기값이 null이거나 비어 있는 배열일 경우, map 함수와 같은 배열 메서드를 호출할 때 문제가 생깁니다.

따라서, 데이터가 완전히 이행되었음을 보장하는 로딩 상태 관리가 필수적입니다. 위에서 소개한 방법처럼, API 호출의 완료 시점을 체크하고, 이에 따라 렌더링을 제어하는 것은 React 애플리케이션에서 안정적인 데이터를 다루기 위한 중요한 패턴입니다.

---

추가 팁: 옵셔널 체이닝(Optional Chaining) 활용

최근 JavaScript에서는 옵셔널 체이닝(Optional Chaining) 연산자(?.)를 지원함에 따라, 데이터가 null 또는 undefined일 때 안전하게 접근할 수 있는 방법이 제공되고 있습니다. 예를 들어, 아래와 같이 코드를 작성할 수 있습니다:

return (
  <div>
    {data?.map(item => (
      <div key={item.id}>{item.name}</div>
    )) || <div>데이터가 없습니다.</div>}
  </div>
);

이 코드는 data가 존재할 때만 map 함수를 호출하고, 그렇지 않으면 “데이터가 없습니다.”라는 메시지를 렌더링합니다. 다만, 옵셔널 체이닝은 데이터의 로딩 상태를 명확하게 표현해주지는 않으므로, 여전히 로딩 상태와 에러 상태를 관리하는 별도의 로직이 필요합니다.

---

최종 정리 및 결론

React에서 Axios를 통해 데이터를 받아오면서 map 함수 호출 오류가 발생하는 문제는 주로 데이터가 아직 Promise 객체로 남아있거나 초기값이 null인 상태에서 배열 메서드를 호출할 때 나타납니다. 이 문제를 해결하기 위해서는 다음과 같은 점을 고려해야 합니다:

1. 데이터의 초기값 설정
   배열 데이터를 다룰 때 초기값을 null이 아닌 빈 배열([])로 설정하여, 기본적인 map 호출이 가능하도록 합니다.
2. 로딩 상태 관리
   별도의 state 변수를 사용하여 데이터 로딩 상태를 관리하고, API 호출이 완료되었을 때만 데이터를 렌더링합니다. 이를 통해 Promise 객체가 해결되기 전에 렌더링되는 문제를 방지할 수 있습니다.
3. 조건부 렌더링 활용
   삼항 연산자나 논리 연산자를 사용하여, 데이터 로딩 중, 에러 발생, 데이터 정상 로딩 등 각 상태에 맞는 컴포넌트를 렌더링하도록 코드를 작성합니다.
4. 옵셔널 체이닝 고려
   옵셔널 체이닝을 사용하면 데이터가 없을 때 안전하게 접근할 수 있지만, 로딩 상태와 에러 상태는 별도로 처리해야 합니다.

결론

React 애플리케이션에서 비동기 데이터 처리 시 나타나는 "map 함수 호출이 불가능하다"는 오류는 데이터의 초기 상태와 Promise 객체의 특성에서 기인합니다. 간단하게 말해, 데이터가 완전히 로드되지 않았을 때 발생하는 문제이며, 이를 해결하기 위해 로딩 상태를 나타내는 state 변수를 생성하고 조건부 렌더링을 적용하는 방식이 효과적입니다.
실제 개발 현장에서는 데이터의 이행 상태를 면밀히 파악하고, 사용자에게 적절한 피드백(로딩 스피너, 에러 메시지 등)을 제공하는 것이 사용자 경험(UX)을 향상시키는 핵심 요소임을 기억해야 합니다.

위에서 제시한 방법 외에도, 코드의 가독성과 유지 보수성을 위해 커스텀 훅(Custom Hook)을 만들어 재사용 가능한 데이터 패칭 로직을 구현하는 것도 좋은 방법입니다. 이렇게 하면 다양한 컴포넌트에서 공통된 패턴을 활용하여 데이터 요청, 로딩, 에러 처리 로직을 한 곳에서 관리할 수 있습니다.

마지막으로, 비동기 처리를 보다 명확하게 이해하고, Promise의 상태 변화에 따른 적절한 처리가 얼마나 중요한지 다시 한 번 강조하고 싶습니다. React와 Axios, 그리고 REST API를 사용하는 프로젝트에서는 이러한 점을 유념하여 코드를 작성한다면, 비슷한 오류를 사전에 방지하고 보다 안정적인 애플리케이션을 개발할 수 있을 것입니다.

---

이상으로, [React] REST API, AXIOS로 받아온 Array 객체의 map 함수 호출 오류와 그 해결 방법에 대해 자세히 알아보았습니다. 여러분의 프로젝트에 이 내용이 도움이 되길 바라며, 추가적인 질문이나 의견이 있다면 댓글을 통해 공유해 주시기 바랍니다.

Happy Coding!