[React] (리액트 공부하기 27) 여러 개의 컴포넌트 렌더링하기

1. map() 함수란?

map() 함수는 자바스크립트 배열 메서드 중 하나로, 배열의 각 요소에 대해 주어진 함수를 실행하고 그 결과로 새로운 배열을 반환한다.

예시 코드:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

여기서 map()은 각 number에 대해 number * 2를 실행하고 그 결과 배열을 반환한다.

2. React에서 map() 함수 활용하기

React에서 map()을 사용하면 배열의 각 요소를 기반으로 반복적으로 컴포넌트를 생성할 수 있다.

예제 코드:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((numbers) => <li>{number}</li>);

위 코드는 숫자 배열을 순회하며 <li> 태그로 감싸 렌더링한다. 결과적으로 listItems는 다음과 같은 JSX 배열이 된다.

[
  <li>1</li>,
  <li>2</li>,
  <li>3</li>,
  <li>4</li>,
  <li>5</li>
]

---

3. React DOM에 렌더링하기

listItems를 <ul>로 감싸고 React DOM을 이용해 렌더링한다.

전체 코드:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li>{numbers}</li>);
                              
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ul>{listItems}</ul>);

결과:

화면에 <ul> 태그 안에 <li> 태그들이 렌더링되어 다음과 같이 표시된다.

• 1
• 2
• 3
• 4
• 5

---

4. React에서 반복 렌더링의 중요성

React에서는 반복적인 UI를 렌더링할 때 하나하나 컴포넌트를 작성하는 대신, 배열과 map()을 활용하여 효율적으로 컴포넌트를 생성한다. 이는 코드의 간결함과 유지 보수성 향상에 크게 기여한다.