오류 메시지 해독

Actual cause

Your code calls .map() on a value that is undefined. Since .map() is an array method, the value was likely expected to be an array but was missing, not initialized yet, or accessed through the wrong property.

For example:

const items = undefined;
items.map(item => item.name); // TypeError

Most likely fixes

1. Initialize the value as an empty array

This is most likely when data is loaded asynchronously or stored in state.

const [items, setItems] = useState([]);

Or provide a fallback:

const result = (items ?? []).map(item => item.name);

2. Check that the property path or API response shape is correct

You may be reading the wrong field:

// API returns: { data: { items: [...] } }
response.items.map(...); // Wrong
response.data.items.map(...); // Correct

Inspect the value before mapping:

console.log(response);
console.log(response?.data?.items);

3. Wait until the data exists before calling .map()

Use a guard or optional chaining:

if (!Array.isArray(items)) {
  return;
}

const result = items.map(item => item.name);

For rendering:

{items?.map(item => (
  <div key={item.id}>{item.name}</div>
))}

Prevention tip

Define and validate data contracts at boundaries. For example, normalize API data immediately:

const items = Array.isArray(response?.data?.items)
  ? response.data.items
  : [];

Using TypeScript types can also catch incorrect property paths before runtime.