[React] 공식문서 공부 -리스트 렌더링

리액트에서 map(), filter()를 사용하여 배열의 있는 데이터들 

모두 렌더링 하거나 특정 조건에 맞는 데이터만 렌더링 할 수 있습니다.

| 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>

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