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

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

안녕하세요, 여러분! 이번 포스팅에서는 React 애플리케이션 개발 중 REST API와 Axios를 이용해 데이터를 가져올 때 발생할 수 있는 한 가지 난관과 그 해결 방법에 대해 자세히 다루어 보겠습니다. 특히, 서버로부터 받아온 Array 객체에 대해 map 함수를 호출할 수 없는 문제 상황을 중심으로, 원인 분석부터 해결 방안까지 차근차근 설명해드릴 예정입니다.

---

도입부: 문제 상황과 발생 배경

React를 이용해 프론트엔드 애플리케이션을 개발하는 과정에서 REST API를 호출하여 데이터를 가져오는 일은 매우 흔한 작업입니다. 저는 최근에 Axios를 이용해 서버로부터 데이터를 받아오면서, 특정 상황에서 Array 객체에 map 함수를 호출할 수 없다는 오류를 마주한 적이 있었습니다.

프로젝트에서는 사용자 입력을 받아 formdata를 서버로 전송하고, 정상적으로 저장되는 것을 확인하였지만, 해당 데이터를 화면에 렌더링하려고 div 내부에서 객체를 꺼내 쓰는 과정에서 “map is not a function” 또는 “Cannot read property 'map' of undefined/null”과 같은 오류가 발생했습니다. 원인을 찾아보니, 데이터가 null이었던 상태가 실제 데이터 값으로 대체되기 전에 잠시 Promise 객체로 존재하는 타이밍 문제가 원인이었습니다. 한 시간 넘게 삽질한 후에야, 사실 아주 간단한 해결책이 있다는 것을 알게 되었는데요, 그 방법은 바로 로딩 상태를 관리하여 데이터가 완전히 준비된 후에 컴포넌트를 렌더링하도록 하는 것이었습니다.

---

문제의 핵심 원인 분석

이 문제를 보다 구체적으로 설명하자면, REST API 호출과 관련된 비동기 처리의 특성 때문에 초기 렌더링 시점에 데이터가 아직 준비되지 않은 상태가 발생합니다. React 컴포넌트는 렌더링이 이루어질 때, 상태(state)에 저장된 데이터를 바로 활용하게 되는데, 만약 이 데이터가 아직 Promise 객체(또는 null) 상태라면, 해당 데이터의 메서드(map 등)를 호출하려고 할 때 오류가 발생합니다.

예를 들어, 아래와 같은 상황을 가정해봅시다.

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

function DataList() {
  const [dataList, setDataList] = useState(null);

  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then(response => {
        // 응답 데이터가 Array 객체라고 가정
        setDataList(response.data);
      })
      .catch(error => {
        console.error('데이터 가져오기 실패:', error);
      });
  }, []);

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

export default DataList;

위 코드에서는 dataList가 초기값으로 null로 설정되어 있기 때문에, 컴포넌트가 처음 렌더링될 때 map 함수를 호출하려고 하게 되면 “Cannot read property 'map' of null”이라는 오류가 발생하게 됩니다. 물론, API 호출이 완료되면 setDataList를 통해 Array 데이터로 업데이트되겠지만, 그 시점 전에 이미 렌더링이 진행되어 오류가 발생하는 것입니다.

또한, 경우에 따라 Axios 호출 자체가 비동기로 작동하기 때문에, 데이터가 실제 Array 객체로 변환되기 전까지 잠시 Promise 객체 형태로 존재할 가능성도 있습니다. 이 경우에도 동일하게 Array 객체의 메서드인 map을 호출할 수 없게 됩니다.

---

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

이 문제를 해결하기 위한 가장 기본적인 접근법은, 데이터가 완전히 로딩되었는지 확인하는 로딩 상태 변수를 도입하는 것입니다. React의 useState 훅을 이용해 로딩 상태를 관리하고, 데이터가 준비된 후에만 해당 데이터를 활용하여 렌더링하도록 조건부 로직을 추가하면 됩니다.

예를 들어, 다음과 같이 코드를 작성할 수 있습니다.

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

function DataList() {
  // 데이터 상태와 로딩 상태를 각각 관리
  const [dataList, setDataList] = useState([]);
  const [showList, setShowList] = useState(false);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get('https://api.example.com/data');
        // 데이터가 정상적으로 받아졌다면 상태 업데이트
        setDataList(response.data);
        // 데이터 로딩 완료를 알리는 상태값을 true로 변경
        setShowList(true);
      } catch (error) {
        console.error('데이터 가져오기 실패:', error);
      }
    }
    fetchData();
  }, []);

  return (
    <div>
      {showList ? (
        dataList.map(item => (
          <div key={item.id}>{item.name}</div>
        ))
      ) : (
        <p>데이터 로딩 중...</p>
      )}
    </div>
  );
}

export default DataList;

위 코드에서는 초기 상태값으로 dataList를 빈 배열로 지정하여, 데이터가 준비되지 않은 상태에서도 안전하게 map 함수를 호출할 수 있도록 했습니다. 추가적으로, showList라는 별도의 상태 변수를 두어, 비동기 API 호출이 완료되어 데이터를 받아온 후에 setShowList(true)를 호출합니다. HTML 내부에서는 삼항 연산자를 사용하여 showList가 true일 때만 데이터를 렌더링하고, 그렇지 않을 경우 “데이터 로딩 중...” 메시지를 보여줍니다.

이렇게 함으로써, 데이터가 아직 준비되지 않은 상태에서 발생할 수 있는 map 함수 호출 오류를 사전에 방지할 수 있습니다.

---

코드 분석 및 세부 설명

위에서 소개한 코드의 주요 부분을 조금 더 자세히 살펴보겠습니다.

1. 상태 변수 초기화dataList의 초기값을 빈 배열([])로 설정함으로써, 컴포넌트가 처음 렌더링될 때 map 함수를 안전하게 호출할 수 있도록 했습니다. 만약 초기값을 null 또는 undefined로 설정했다면, map 함수를 호출하는 순간 오류가 발생할 수 있었습니다. 또한, showList 상태를 false로 두어 데이터 로딩 여부를 관리합니다.
2. const [dataList, setDataList] = useState([]); const [showList, setShowList] = useState(false);
3. 비동기 데이터 호출useEffect 훅 내부에서 async 함수를 선언하여 Axios를 통해 데이터를 호출합니다. 응답이 성공적으로 오면, setDataList를 통해 데이터를 저장하고, 동시에 setShowList(true)를 호출하여 데이터 로딩이 완료되었음을 컴포넌트에 알립니다.
4. useEffect(() => { async function fetchData() { try { const response = await axios.get('https://api.example.com/data'); setDataList(response.data); setShowList(true); } catch (error) { console.error('데이터 가져오기 실패:', error); } } fetchData(); }, []);
5. 조건부 렌더링최종 렌더링 부분에서는 삼항 연산자를 활용하여, showList 상태가 true일 때만 데이터를 map 함수를 통해 렌더링하도록 합니다. 만약 showList가 false라면, 로딩 중임을 알리는 문구를 출력하여 사용자에게 데이터가 준비되는 중임을 알려줍니다.
6. return ( <div> {showList ? ( dataList.map(item => ( <div key={item.id}>{item.name}</div> )) ) : ( <p>데이터 로딩 중...</p> )} </div> );

이와 같이 조건부 렌더링을 활용하면, 데이터가 준비되지 않은 상태에서 발생할 수 있는 예기치 않은 오류를 효과적으로 예방할 수 있습니다. 특히, 비동기 데이터 호출과 관련된 문제는 React 애플리케이션 개발에서 매우 흔하게 발생하는 문제 중 하나이므로, 이러한 패턴을 기억해 두면 개발 효율성과 안정성을 크게 높일 수 있습니다.

---

문제 해결을 위한 추가 팁

이번 포스팅에서 소개한 방법 외에도, 비동기 데이터 처리 시 유용하게 사용할 수 있는 몇 가지 팁을 함께 공유드리겠습니다.

1. 초기 상태값을 안전하게 설정하기
   데이터의 초기 상태값을 null 대신 빈 배열이나 빈 객체로 설정하는 것은 좋은 습관입니다. 이렇게 하면, 해당 데이터에 대해 미리 예상되는 메서드(예: 배열의 경우 map, filter 등)를 안전하게 호출할 수 있습니다.
2. 에러 핸들링 강화하기
   API 호출 시 try-catch 블록을 사용하여 에러 발생 시 사용자에게 명확한 피드백을 주는 것이 좋습니다. 에러 메시지를 UI에 출력하거나, 별도의 에러 컴포넌트를 렌더링하는 방식도 고려해볼 수 있습니다.
3. 로딩 상태 관리 라이브러리 사용
   간단한 프로젝트라면 useState로 로딩 상태를 관리하는 것이 충분하지만, 보다 복잡한 애플리케이션에서는 Redux, Recoil, 혹은 React Query와 같은 라이브러리를 활용하여 로딩, 에러, 데이터 캐싱 등의 상태를 효율적으로 관리할 수 있습니다.
4. 조건부 렌더링 패턴 다양화
   삼항 연산자 외에도, && 연산자를 활용한 조건부 렌더링 패턴이나, 별도의 로딩 컴포넌트를 만들어 활용하는 방법도 있습니다. 예를 들어, 아래와 같이 작성할 수도 있습니다.이와 같이 작성하면, showList가 false일 때만 로딩 중 메시지를 출력하고, 데이터가 준비되었을 때 동시에 데이터 배열이 비어있지 않은지 확인한 후 렌더링하도록 할 수 있습니다.
5. return ( <div> {!showList && <p>데이터 로딩 중...</p>} {showList && dataList.length > 0 && dataList.map(item => ( <div key={item.id}>{item.name}</div> ))} </div> );
6. 비동기 호출 최적화
   만약 동일한 데이터를 여러 컴포넌트에서 사용해야 한다면, API 호출을 별도의 커스텀 훅으로 분리하거나, 컨텍스트 API 혹은 상태 관리 라이브러리를 이용하여 데이터를 한 번만 호출하고 공유하는 방식도 고려해볼 수 있습니다. 이 방식은 네트워크 요청 수를 줄이고, 애플리케이션의 성능을 향상시킬 수 있습니다.

---

실제 개발 환경에서의 적용 사례

저 역시 프로젝트에서 사용자 목록, 게시물 목록 등 다양한 데이터를 REST API를 통해 받아와 렌더링해야 하는 경우가 많았습니다. 초반에는 API 호출 결과가 늦게 도착하면서 컴포넌트가 렌더링되는 시점에 데이터가 준비되지 않아 map 호출 시 에러가 발생하는 문제를 종종 경험했었습니다.

예를 들어, 사용자의 댓글 목록을 렌더링하는 컴포넌트를 구현할 때, 댓글 데이터가 아직 로딩 중인 상태에서 map 함수를 호출하여 아래와 같은 오류가 발생한 적이 있습니다.

TypeError: Cannot read property 'map' of null

이 문제를 해결하기 위해, 저는 초기 상태값을 null 대신 빈 배열로 설정하고, 로딩 상태를 관리하는 방법을 적용하였습니다. 변경 후에는 데이터가 완전히 준비된 후에만 댓글 컴포넌트를 렌더링하므로, 위와 같은 오류 없이 정상적으로 화면에 댓글 목록이 표시되었습니다.

또한, 데이터 로딩 상태를 사용자에게 명확하게 전달하기 위해 로딩 스피너나 “데이터를 불러오는 중입니다…” 같은 문구를 추가하는 등의 UX 개선도 함께 진행하였습니다. 이러한 개선은 사용자 경험(UX)을 크게 향상시킬 뿐만 아니라, 개발 과정에서 발생할 수 있는 디버깅 시간을 단축시키는 데에도 큰 도움이 되었습니다.

---

비동기 데이터 처리의 중요성과 React의 장점

React와 같은 프레임워크를 사용하는 주된 이유 중 하나는, 상태(state)와 컴포넌트의 재사용성을 통해 복잡한 사용자 인터페이스를 효과적으로 구성할 수 있다는 점입니다. 그러나 비동기 데이터 처리는 이러한 장점을 최대한 활용하기 위해 반드시 고려해야 할 사항입니다. API 호출과 같은 비동기 작업은 네트워크 상태나 서버의 응답 시간에 따라 불확실성이 존재하기 때문에, 이를 효과적으로 관리하는 것이 애플리케이션의 안정성과 사용자 만족도에 큰 영향을 미칩니다.

React에서는 useEffect, useState, 그리고 커스텀 훅(custom hooks) 등을 활용하여 이러한 비동기 데이터 처리 과정을 간단하고 명확하게 구현할 수 있습니다. 또한, 최근에는 React Query와 같은 라이브러리가 등장하면서, 데이터 페칭과 캐싱을 자동화하여 개발자가 보다 쉽게 비동기 작업을 관리할 수 있도록 도와주고 있습니다.

제가 이번 포스팅에서 소개한 조건부 렌더링과 로딩 상태 관리는, 이러한 비동기 데이터 처리 패턴 중 가장 기본적이면서도 효과적인 방법입니다. 실제 개발 현장에서 이러한 패턴을 자주 사용하게 될 것이며, 이를 통해 불필요한 에러를 미연에 방지하고, 사용자에게 더 나은 경험을 제공할 수 있습니다.

---

결론: 안정적인 데이터 렌더링을 위한 작은 실천

React 애플리케이션 개발 시, REST API를 통해 데이터를 받아와 화면에 렌더링하는 과정은 필수적인 작업입니다. 그러나 데이터가 아직 준비되지 않은 상태에서 map 함수를 호출하는 등의 사소한 실수가 전체 애플리케이션의 안정성을 해칠 수 있습니다. 오늘 소개한 방법처럼, 초기 상태값을 안전하게 설정하고 로딩 상태를 명확하게 관리하는 것은 이러한 문제를 해결하는 데 매우 유용합니다.

저의 경험을 바탕으로 말씀드리자면, 한 시간 넘게 삽질한 끝에 발견한 이 간단한 해결책은, 개발 초기 단계에서부터 항상 “데이터가 준비되었는지 확인”하는 습관을 들이는 것이 얼마나 중요한지를 다시 한 번 깨닫게 해주었습니다. 비동기 처리와 관련된 문제는 대부분의 웹 애플리케이션에서 발생할 수 있는 일반적인 이슈이지만, 이러한 기본적인 원칙을 지키면 충분히 예방하고 해결할 수 있습니다.

앞으로 여러분도 프로젝트를 진행하면서 이와 같은 문제를 마주치게 된다면, 이번 포스팅에서 소개한 로딩 상태 관리와 조건부 렌더링 기법을 적극 활용해 보시길 바랍니다. 조금만 주의를 기울이면, 복잡한 비동기 데이터 처리 과정에서도 안정적인 컴포넌트 렌더링을 보장할 수 있으며, 그 결과 사용자 경험과 개발 생산성 모두를 높일 수 있을 것입니다.

마지막으로, 개발자 여러분께 드리는 팁은 “작은 디테일에도 주의를 기울이자”입니다. 간단한 한 줄의 코드 변경이 전체 애플리케이션의 안정성과 품질을 좌우할 수 있음을 기억하시기 바랍니다.

---

이상으로, [React] REST API와 Axios로 받아온 Array 객체에서 map 함수를 호출할 수 없는 문제와 그 해결 방법에 대해 알아보았습니다. 본 포스팅이 여러분의 프로젝트에서 비슷한 문제를 해결하는 데 도움이 되기를 바라며, 앞으로도 안정적이고 효율적인 코딩을 위한 다양한 팁과 기술을 공유하도록 하겠습니다. 읽어주셔서 감사합니다!