[React] 컴포넌트에서 배열 사용하기

map함수 사용하기

배열 안의 데이터를 꺼낼 때에는 map이라는 함수를 사용합니다.

사용방식은 아주 간단한데요. 바로 반복이 필요한 곳에 중괄호를 이용하여 개행을 한 후에 그 안에 map함수를 이용한 코드를 작성해 주시면 됩니다.

return (
  <ul>
    {
      Arr.map((item, i)=>{
        <li>{Arr[0].title}</li>
        <li>{Arr[i].content}</li>
        <li>{item.price}</li>
      })
    }
  </ul>
)

map() 함수의 매개변수로는 첫 번째, 배열의 각각의 아이템이 들어있고 두 번째, 배열의 index값이 들어있습니다.

때문에 배열에서 데이터를 사용할 때는 기존배열[원하는 index번호]. 가져올 값을 기본으로 사용하되 특정 index가 아닌 배열의 모든 아이템에 해당하는 경우에는 기존배열[index].가져올값 이렇게 작성하거나, 첫 번째 매개변수명을 이용하여 item.가져 올값 이렇게 가져올 수 있습니다.

 

아래는 직접 작성한 예제 코드입니다.

⭐ 해당 코드는 React와 TypeScript로 작성되었습니다. ⭐

예제.1

app.tsx에서 coffee 배열 전체를 넘겼을 때 사용하는 방식으로 DetailCoffee.tsx에서 map함수를 사용하는데 이때 return에 바로 map 함수를 사용하는 게 아니라 제일 먼저 return 바로 안에 들어갈 태그를 작성해야 하는데 이때 의미 있는 태그를 사용하면 안 되는 경우에 프래그먼트(Fragments)를 먼저 작성하여 안에 태그를 감싸주고 그 안에 원하는 코드를 작성해 주면 해결이 됩니다.

 

아래의 코드 같은 경우에는 바깥에 Row태그로 감싸져 있고, Col태그가 바로 나와야 하는 상황이라 두 사이에 의미 있는 태그가 들어가서는 안 됐기 때문에 프래그먼트를 사용한 것입니다. (그래서 html 코드를 확인하면 row안에 다른 태그가 감싸는 구조가 아닌 col이 바로 나옵니다.)

🔻App.tsx

import coffee from './coffeelist';
export interface iCoffee{
  id : number;
  title : string;
  contnet : string;
  price : number;
}
const App : React.FC = ()= >{
  return (
    <div>
      <DetailCoffee coffee={coffee}></DetailCoffee>
    </div>
  )
}

export default App;

 

🔻DetailCoffee.tsx

import iCoffee from './App';
interface iCoffeeProps {
  coffee : iCoffee[];
}
const DetailCoffee:React.FC<iCoffeeProps> = ({coffee}) => {
  return (
    <>
      {
        coffee.map((item)=>{
          return (
            <div>
              <img src={`${process.env.PUBLIC_URL}/asset/img/coffee${item.id + 1}.png`}></img>
              <h2>{item.title}</h2>
              <p>{itme.content}</p>
              <p>{item.price}</p>
            </div>
          )
        })
      }
    </>
  )
}

 

예제.2

app.tsx에서 배열 전체를 넘기는 게 아닌 각각의 data를 전달한다면 어떻게 바뀔까요?

먼저 App.tsx에서 map 함수를 이용하여 각각의 DetailCoffee 컴포넌트에 coffee라는 데이터가 각각의 정보를 넘기기 때문에 코드가 조금 더 간결한 형태를 가지고 있습니다. 또한 DetailCoffee컴포넌트에서 사용되는 interface는 배열형태로 데이터가 넘어오는 게 아니기 때문에 iCoffee 그대로 작성을 해주어야 합니다.

🔻App.tsx

import coffee from './coffeelist';
export interface iCoffee{
  id : number;
  title : string;
  contnet : string;
  price : number;
}
const App : React.FC = ()= >{
  return (
    <Row>
      {
        coffee.map((item)=>{
          return (
            <DetailCoffee coffee={item}></DetailCoffee>
          )
        })
      }
    </Row>
  )
}

export default App;

🔻DetailCoffee.tsx

import iCoffee from './App';
interface iCoffeeProps {
  coffee : iCoffee;
}
const DetailCoffee:React.FC<iCoffeeProps> = ({coffee}) => {
  return (
    <Col>
      <img src={`${process.env.PUBLIC_URL}/asset/img/coffee${item.id + 1}.png`}></img>
      <h2>{item.title}</h2>
      <p>{itme.content}</p>
      <p>{item.price}</p>
    </Col>
  )
}