map 함수

map 함수

• JavaScript의 배열 메서드
• 각 요소에 대해 주어진 함수를 호출하여 새로운 배열을 생성하는 데 사용됨
• TypeScript에서도 자주 사용되고, 특히 컴포넌트 리스트를 렌더링할 때 유용

JavaScript에서의 기본 사용법

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);

console.log(doubled); // [2, 4, 6, 8, 10]

React에서의 사용 예시

import React from 'react';

const users = [
  { id: 1, name: '차은우' },
  { id: 2, name: '고민시' },
  { id: 3, name: '류선재' }
];

const UserList = () => {
  return (
    <div>
      {users.map(user => (
        <div key={user.id}>
          {user.name}
        </div>
      ))}
    </div>
  );
};

export default UserList;

TypeScript에서의 사용 예시

import React from 'react';

interface User {
  id: number;
  name: string;
}

const users: User[] = [
  { id: 1, name: '차은우' },
  { id: 2, name: '고민시' },
  { id: 3, name: '류선재' }
];

const UserList: React.FC = () => {
  return (
    <div>
      {users.map(user => (
        <div key={user.id}>
          {user.name}
        </div>
      ))}
    </div>
  );
};

export default UserList;

컴포넌트로 리스트 아이템 분리

import React from 'react';

interface User {
  id: number;
  name: string;
}

const users: User[] = [
  { id: 1, name: '차은우' },
  { id: 2, name: '고민시' },
  { id: 3, name: '류선재' }
];

const UserItem: React.FC<{ user: User }> = ({ user }) => (
  <div>
    {user.name}
  </div>
);

const UserList: React.FC = () => {
  return (
    <div>
      {users.map(user => (
        <UserItem key={user.id} user={user} />
      ))}
    </div>
  );
};

export default UserList;

• UserItem이라는 별도의 컴포넌트를 정의하여 사용자를 렌더링함
• UserList 컴포넌트는 map함수를 사용하여 UserItem 컴포넌트를 반복 렌더링 함
• 코드가 더 모듈화되고 유지보수가 쉬워짐