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>
)
}
'프로그래밍📚 > react' 카테고리의 다른 글
[React] 컴포넌트의 생명주기 useEffect (0) | 2024.02.12 |
---|---|
[React] styled-components (0) | 2024.02.10 |
[React] 라우팅 - Route, Link (0) | 2024.02.10 |
[React] export와 export default (0) | 2024.02.09 |
[React] 이미지 파일 사용하기 (0) | 2024.02.09 |