리스트 렌더링

원문 https://ko-react-exy5xcwjj-fbopensource.vercel.app/learn/rendering-lists

1️⃣ React에서 배열 데이터 처리

• JavaScript 배열 메서드를 활용하여 데이터 배열을 조작 가능

2️⃣ filter()와 map() 활용

• filter(): 특정 조건을 만족하는 데이터만 추출
• map(): 데이터를 변환하여 컴포넌트 배열로 렌더링

배열을 데이터로 렌더링하기

내용이 있는 리스트가 있다고 가정해 봅시다.

<ul>
  <li>Creola Katherine Johnson: mathematician</li>
  <li>Mario José Molina-Pasquel Henríquez: chemist</li>
  <li>Mohammad Abdus Salam: physicist</li>
  <li>Percy Lavon Julian: chemist</li>
  <li>Subrahmanyan Chandrasekhar: astrophysicist</li>
</ul>

1️⃣ 동일한 컴포넌트, 다른 데이터

• 리스트 항목의 차이점은 주로 데이터이며, 다양한 데이터를 사용해 동일한 컴포넌트를 여러 개 렌더링 가능

2️⃣ JavaScript 배열 및 메서드 활용

• 데이터를 객체와 배열에 저장하고 map()과 filter()를 사용하여 컴포넌트 리스트 생성

다음은 배열에서 항목 리스트를 생성하는 방법에 대한 간단한 예시입니다.

1. 데이터를 배열로 이동합니다.

const people = [
  'Creola Katherine Johnson: mathematician',
  'Mario José Molina-Pasquel Henríquez: chemist',
  'Mohammad Abdus Salam: physicist',
  'Percy Lavon Julian: chemist',
  'Subrahmanyan Chandrasekhar: astrophysicist'
];

1. people의 요소를 새로운 JSX 노드 배열인 listItems에 매핑합니다.

const listItems = people.map(person => <li>{person}</li>);