처음 만난 리액트 문서
10.2 여러 개의 컴포넌트 렌더링하기
먼저 우리가 앞에서 살펴봤던 에어비앤비 첫 화면을 다시 한 번 보도록 하겠습니다. 아래 그림을 보면 A라는 컴포넌트와 B라는 컴포넌트가 반복적으로 나오는 것을 볼 수 있습니다. 이렇게 같은 컴포넌트를 화면에 반복적으로 나타내야 할 경우에 이를 코드상에 하나씩 직접 넣는 것은 같은 코드가 반복되기 때문에 굉장히 비효율적입니다. 또한 동적으로 화면의 내용이 바뀌는 경우에는 코드를 직접 하나씩 넣는 방식으로는 구현하기가 까다롭습니다.
이러한 경우에 사용하는 것이 바로 자바스크립트 배열의 map()함수입니다. map()함수는 영어 단어 mapping을 떠올리면 기억하기 쉽습니다. 매핑이라고 하면 한 쪽에 있는 아이템과 다른 한 쪽에 있는 아이템을 짝을 짓는다는 의미를 갖고 있는데, 여기에서의 매핑도 마찬가지로 배열에 들어있는 각 변수에 어떤 처리를 한 뒤에 리턴하는 것으로 이해하면 됩니다. 아래 map()함수를 사용하는 예시 코드를 한 번 보도록 하겠습니다.
const doubled = numbers.map((number) => number * 2);
위 코드는 map()함수를 사용하여 numbers배열에 들어있는 각 숫자에 2를 곱한 값이 들어있는 doubled라는 배열을 생성하는 코드입니다. 이처럼 map()함수는 배열의 첫 번째 아이템부터 순서대로 각 아이템에 어떠한 연산을 수행한 뒤에 리턴하여 최종 결과를 배열로 만들어서 리턴해준다고 보면 됩니다. 그렇다면 실제로 리액트에서는 이 map()함수를 어떻게 사용해서 element를 렌더링하는지 예시 코드를 한 번 보도록 하겠습니다.
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li>{number}</li>);
위 코드를 보면 숫자 1부터 5까지 들어있는 numbers라는 배열이 있고, map()함수를 사용해서 이 배열에 들어있는 각 숫자를 <li>태그로 감싸서 리턴하고 있습니다. JSX에서는 중괄호를 사용하여 자바스크립트 코드를 넣을 수 있기 때문에, 이렇게 하면 각 숫자의 값이 태그 안에 들어가게 됩니다. 이렇게 리턴된 listItems배열은 총 5개의 element를 갖고 있게 됩니다. 그리고 이것을 화면에 렌더링 하기 위해서 아래와 같이 코드를 작성해주면 됩니다.
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ul>{listItems}</ul>);
결과적으로 <li>태그가 들어있는 listItems배열을 <ul>태그로 감싸서 렌더링하게 됩니다. 최종적으로 렌더링 되는 코드는 아래와 같습니다.
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<ul>
<li>{1}</li>
<li>{2}</li>
<li>{3}</li>
<li>{4}</li>
<li>{5}</li>
</ul>
);
그리고 최종 렌더링 결과는 아래 그림과 같이 1에서 5까지 숫자가 글머리 기호가 있는 목록으로 출력되게 됩니다.
마지막 업데이트: 2025년 08월 21일 09시 05분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page