[React] 배열을 이용한 반복 출력

이번 글에서는 React 뿐만 아니라 JavaScript 전반에서 자주 사용하는 배열(map)을 React에서 어떻게 사용하는지 공부하려고 합니다.

배열(array) : 여러 개의 값을 하나로 묶어 순서대로 저장하는 자료구조. [ ]

map() : 배열의 각 요소를 순회하면서 새로운 값을 만들어내는 고차 함수.

key : React에서 반복되는 요소를 고유하게 구분하기 위한 식별자.

JSX : JavaScript  + HTML을 합친 React의 렌더링 문법.

---

문자열 배열을 map으로 출력하기!

• fruits라는 문자열 배열 정의.
• JSX 안에서 fruits.map()으로 배열의 각 과일 이름을 <li> 태그로 변환해서 출력.
• 각 item에 key로 index를 부여해서 React가 항목을 구분할 수 있다.

---

객체 배열(map)로 사용자 정보 출력하기!!

• 객체 배열 users 선언.(각 객체는 id, name, email 속성을 가지고 있다.)
• map()을 사용해 각 사용자 정보를 <li>로 변환해서 화면에 출력.
• key로 id를 사용해 각 요소의 고유성을 보장.
• 문자열 배열과 다르게 객체 배열을 다룰 때는 필요한 필드만 JSX에 표시할 수 있다.

---

객체 배열을 컴포넌트로 분리해서 map 출력하기!!!

 

하위 컴포넌트 BookCard.js

• 하위 컴포넌트는 상위 컴포넌트로부터 title과 author라는 props를 받아 렌더링한다.
• UI 재사용성을 높이기 위해 하나의 책 정보를 보여주는 컴포넌트를 별도로 분리.
• props는 하위 컴포넌트에 데이터를 전달하는 기본적인 방법.

상위 컴포넌트 BookCardList.js

• 책 객체 배열 books 정의.
• map()을 통해 각 책 데이터를 <BookCard> 컴포넌트로 전달하면서 반복 렌더링.
• 각 BookCard는 자신만의 props를 받아 독립적으로 화면에 출력.
• 컴포넌트 분리와 props의 전달, key 속성의 활용으로 React UI 설계의 기본.

App.js에 모든 컴포넌트 통합

 

 

React에서 배열을 렌더링할 때는 각 항목에 반드시 고유한 key를 부여하는 것이 중요합니다.

---

React에서 배열과 렌더링 개념 정리

배열 : 데이터를 순서대로 저장하는 자료구조.

map() 함수 : 배열을 변환해서 새 배열을 만드는 함수(React에서 반복 UI 생성에 자주 사용됨).

JSX : 자바스크립트 안에서 HTML처럼 UI를 표현하는 문법.

key : React가 리스트를 효율적으로 렌더링하기 위한 고유 식별자(반드시 필요!!!)

props : 부모에서 자식 컴포넌트로 전달하는 데이터(UI 재사용성을 높임)

컴포넌트 분리 : 복잡한 UI를 작은 단위 컴포넌트로 나눠서 관리(유지보수와 재사용에 유리!)