| map()

map() 함수를 사용하여 배열의 모든 데이터들을 한 번에 렌더링 할 수 있습니다.

아래와 같은 데이터가 있다고 하면

const items = [

{ id: 1, name: 'apple' },

{ id: 2, name: 'banana' },

{ id: 3, name: 'orange' },

];

위 배열을 사용하여 리스트 형식으로 렌더링 하고 싶으면

<ul>

{

itmes.map((v, i) => {

return <li key={i}>{item.name}</li>

})

}

</ul>

이런 식으로 사용하면 배열을 돌면서 각 데이터들의 정보를 렌더링 해줍니다.

| filter()

filter()를 사용하면 배열에서 특정 조건의 정보만 뽑아서 렌더링 할 수 있습니다.

<ul>

{

items.filter((item) => item.name === 'apple').map((v, i) => {

return <li key={item.id}>{item.name}</li>

})

}

</ul>

이런 식으로 사용하면 특정 조건에 해당되는 데이터만 렌더링 해줍니다.