React에서 배열을 순회하는 방법 (올바른 방법)

Source: Dev.to

🧠 React에서의 방법: map()

왜?

React는 선언적이다 — 데이터를 기반으로 UI가 어떻게 보여야 하는지 기술한다.

예시

const users = ["Adam", "Sophia", "Lucas"];

👉 배열의 각 요소를 UI로 변환한다.

⚠️ key 문제 (많은 사람들이 간과함)

❌ 잘못된 예

{users.map((user, index) => (
  {user}
))}

✅ 올바른 예

const users = [
  { id: 1, name: "Adam" },
  { id: 2, name: "Sophia" },
  { id: 3, name: "Lucas" }
];

{users.map(user => (
  {user.name}
))}

👉 key로 고유하고 안정적인 값을 항상 사용한다.

🚫 for 또는 forEach를 사용하면 안 되는 이유

“왜 언제처럼 반복하지?”

• forEach() 값을 반환하지 않는다 → React가 렌더링할 수 없다.
• 전통적인 반복문도 React의 선언적 모델과 잘 맞지 않는다.

const [users, setUsers] = useState([]);

렌더링

return (
  {users.map(user => (
    - {user.name}
  ))}
);

💥 흔히 저지르는 실수

function UserCard({ user }) {
  return {user.name};
}

👉 깔끔하고 재사용 가능하며 확장 가능한 컴포넌트를 사용한다.

🚀 결론

React는 “반복”하지 않는다 — 데이터를 UI로 변환한다. .map()을 마스터하는 것은 React 개발자로 사고하는 첫 번째 단계 중 하나이다.