리액트에서 리스트 데이터를 화면에 출력하는 모든 방법

리액트에서 리스트 데이터를 화면에 출력하는 모든 방법

리스트를 효과적으로 출력하는 방법을 몰라 고생하고 계신가요?
map 함수부터 조건부 렌더링까지,
초보자를 위한 실전 예제로 모두 설명해드립니다!

반응형

 

안녕하세요, 여러분! 🙋‍♂️

이번 시간에는 리액트(React)로 화면에 리스트 데이터를 출력하는 방법을 알아보려고 해요.

특히 초보 개발자 분들이 자주 실수하는 포인트와 자주 쓰이는 패턴들을 중심으로, 최대한 쉽게 설명드릴게요.

단순한 텍스트 배열부터 객체 배열까지 다양한 데이터 출력 방법을 예제로 직접 보여드릴 테니, 끝까지 읽어보시면 실력이 한층 업그레이드될 거예요!

목차

1. map() 함수를 사용한 배열 출력 방법 2. 객체 배열을 활용한 리스트 렌더링 3. Key 속성의 중요성과 사용 팁 4. 조건부 렌더링으로 동적 리스트 제어 5. 리스트 아이템 컴포넌트로 분리하기 6. 리스트 출력 시 피해야 할 실수와 베스트 프랙티스

 

1. map() 함수를 사용한 배열 출력 방법 🧩

리액트에서 리스트 데이터를 출력할 때 가장 많이 사용하는 방법 중 하나가 바로 map() 함수입니다.

배열의 각 요소를 순회하면서 JSX 요소를 리턴해 주는 방식인데요.

간단하지만 강력한 이 방법부터 함께 알아볼게요!

✅ 기본 배열을 출력하는 예제

예를 들어 ['사과', '바나나', '포도']라는 문자열 배열이 있다고 가정해봅시다.

이 데이터를 화면에 출력하려면 다음과 같이 작성할 수 있어요.

{['사과', '바나나', '포도'].map((item, index) => (
  <li key={index}>{item}</li>
))}

위 코드는 배열의 각 요소를 <li> 태그로 감싸서 출력해 주고 있어요.

key 속성은 리액트가 리스트를 효율적으로 렌더링하기 위해 꼭 필요한 부분이니, 잠시 후 자세히 설명드릴게요.

📋 리스트 출력 시 유용한 팁

• JSX 안에서 직접 map()을 사용할 수 있어요.
• 출력할 HTML 요소에 key 속성을 꼭 넣어주세요.
• 너무 복잡한 로직은 별도의 함수로 분리하면 더 깔끔해져요.

📊 비교를 위한 표

구분	사용 여부	설명
map()	✅	배열을 순회하며 JSX 반환
forEach()	❌	JSX를 반환하지 않아 화면에 출력 불가

자, 여기까지가 리액트에서 리스트 데이터를 가장 기본적으로 출력하는 방법이었습니다.

다음 섹션에서는 객체 배열을 출력할 때의 유용한 팁과 예제를 알아볼게요!

 

 

2. 객체 배열을 활용한 리스트 렌더링 📚

단순한 문자열 배열뿐 아니라 객체 배열을 화면에 출력하는 경우도 정말 많죠.

예를 들어

게시판의 글 목록, 사용자 리스트, 상품 정보 등 대부분의 실무 데이터는 객체 배열로 이루어져 있어요.

그럼 실제 예제로 살펴볼까요?

💡 사용자 목록 출력 예제

const users = [
  { id: 1, name: '홍길동', age: 28 },
  { id: 2, name: '김철수', age: 34 },
  { id: 3, name: '이영희', age: 22 },
];

{users.map(user => (
  <div key={user.id}>
    <p>이름: {user.name}</p>
    <p>나이: {user.age}</p>
  </div>
))}

여기서는 각 사용자 객체의 id를 key로 지정했어요.

이는 성능 최적화뿐 아니라 리액트 내부에서 효율적인 비교 연산을 가능하게 합니다.

꼭 고유한 값을 key로 사용해야 해요!

🔍 실제 사용 예시 (게시판)

게시판 데이터를 서버에서 받아온 후 화면에 출력할 때도 거의 동일한 방식이에요.

중요한 건 렌더링하는 컴포넌트 내에서 데이터가 어떤 구조로 되어 있는지, 각 항목을 어떤 방식으로 보여줄지 먼저 정의하는 거죠.

• 서버 응답은 보통 JSON 형태의 객체 배열
• map() 함수로 각 항목을 컴포넌트로 매핑
• key는 id, slug 등 고유 식별자로 설정

실제 개발 프로젝트에서 자주 접하게 되는 패턴이니, 꼭 여러 번 실습하면서 손에 익혀두세요!

다음 섹션에서는 key 속성을 조금 더 자세히 파고들어 보겠습니다.

 

 

3. Key 속성의 중요성과 사용 팁 🔑

리스트를 렌더링할 때 빠지면 안 되는 요소 중 하나가 바로 key 속성입니다.

처음 리액트를 접한 분들이 가장 헷갈려하는 부분이기도 하죠.

하지만 이 key가 없으면 렌더링 성능이 크게 떨어지거나 예기치 않은 버그가 발생할 수 있어요.

🙋‍♂️ key란 도대체 뭐예요?

리액트는 리스트 안의 항목들을 업데이트할 때 DOM을 효율적으로 관리하기 위해 각 항목을 식별할 수 있는 고유한 key 값을 필요로 합니다.

이 key를 기준으로 어떤 항목이 추가되거나 제거됐는지를 판단하는 거죠.

{users.map(user => (
  <div key={user.id}>
    <p>{user.name}</p>
  </div>
))}

이처럼 각 항목에 고유한 id를 key로 사용하는 것이 가장 이상적이에요.

index를 key로 쓰는 경우도 있지만, 항목이 자주 변경되거나 순서가 바뀌는 리스트에서는 사용을 피하는 것이 좋아요.

🚫 index를 key로 사용하면 생기는 문제

• 항목 순서가 바뀌면 불필요한 리렌더링 발생
• 애니메이션/입력값 유지가 꼬이는 경우 발생
• 디버깅이 어려워짐

🛠 key 사용 실전 팁 요약

상황	추천 key	설명
서버에서 가져온 데이터	고유 id	primary key 또는 UUID
정적인 배열	index	변경되지 않는 배열이라면 무방

이제 key에 대한 감이 좀 오셨나요?

다음은 조건부 렌더링을 활용해서 리스트를 더 유동적으로 제어하는 방법을 알려드릴게요!

 

 

4. 조건부 렌더링으로 동적 리스트 제어 🎛

리스트를 출력할 때 모든 데이터를 한 번에 보여주는 건 오히려 사용자 경험을 해칠 수도 있어요.

그래서 자주 사용하는 테크닉 중 하나가 조건부 렌더링입니다.

즉, 특정 조건에 따라 리스트 항목을 보여줄지 말지를 결정하는 거죠.

🎯 조건을 활용한 출력 예제

예를 들어 나이가 30세 이상인 사용자만 출력하고 싶다면 어떻게 해야 할까요?

아래처럼 조건을 걸어주면 됩니다.

{users
  .filter(user => user.age >= 30)
  .map(user => (
    <p key={user.id}>{user.name} - {user.age}세</p>
))}

filter()를 먼저 사용해서 조건에 맞는 항목만 남긴 후 map()으로 렌더링하는 패턴이죠.

실무에서도 정말 많이 사용되니까 꼭 기억해두세요.

📦 조건부 렌더링 방식 비교

방법	장점	단점
filter + map	직관적이고 가독성 좋음	한 번 더 순회하므로 성능 손해 가능성
map 내부 조건문	1회 순회로 효율적	코드가 지저분해질 수 있음

🔑 실전 팁

• 조건이 복잡할수록 filter를 먼저 사용
• JSX 내부 조건문은 삼항연산자(? :)로 처리 가능
• 조건을 외부 변수로 선언하면 코드가 훨씬 깔끔해짐

조건부 렌더링은 단순한 리스트 출력보다 훨씬 더 유연하게 화면을 제어할 수 있는 강력한 도구입니다.

다음 챕터에서는 리스트 아이템을 컴포넌트로 분리해서 더 구조적인 코드를 만드는 방법을 알아보겠습니다!

 

 

5. 리스트 아이템 컴포넌트로 분리하기 🧱

리스트가 길어지고 항목이 복잡해질수록, 코드도 금방 지저분해지기 시작합니다.

이런 경우에는 리스트 항목을 별도 컴포넌트로 분리하는 것이 가장 좋은 방법이에요.

유지보수도 쉬워지고 재사용성도 높아지거든요.

🛠 리스트 항목 컴포넌트 만들기

예를 들어 사용자 정보를 출력하는 UserItem 컴포넌트를 따로 만든다고 가정해 볼게요.

function UserItem({ user }) {
  return (
    <div>
      <p>이름: {user.name}</p>
      <p>나이: {user.age}</p>
    </div>
  );
}

그다음에 리스트를 출력할 때는 이렇게 작성하면 되죠.

{users.map(user => (
  <UserItem key={user.id} user={user} />
))}

📋 이렇게 분리하면 좋은 점

• 복잡한 JSX 로직을 분리할 수 있어 가독성 향상
• 각 항목의 스타일이나 로직을 독립적으로 관리 가능
• 테스트나 리팩토링 시 훨씬 유리

컴포넌트를 잘게 나누는 습관은 리액트를 능숙하게 다루기 위한 첫걸음입니다.

다음 섹션에서는 실수 없이 리스트를 잘 출력하기 위한 베스트 프랙티스를 정리해볼게요!

6. 리스트 출력 시 피해야 할 실수와 베스트 프랙티스 📌

여기까지 따라오셨다면 이제 기본적인 리스트 출력은 문제없이 하실 수 있을 거예요.

하지만 실제로 개발을 하다 보면 사소한 실수 하나로 디버깅에 시간을 많이 쏟게 되죠.

그래서 자주 발생하는 실수들과 꼭 알아두어야 할 베스트 프랙티스를 정리해볼게요!

❗ 자주 하는 실수 TOP 3

1. key 속성 없이 리스트 출력하기 → 렌더링 성능 저하, 경고 발생
2. map 함수에서 return 누락하기 → 아무것도 안 그려짐
3. 동일한 key 값을 여러 항목에 사용하기 → 렌더링 꼬임

✅ 안전한 리스트 렌더링을 위한 베스트 프랙티스

• 항상 key 속성을 고유한 값으로 지정하세요.
• 복잡한 항목은 별도 컴포넌트로 분리하세요.
• 조건부 렌더링은 filter() 또는 삼항 연산자(?)로 처리하세요.
• 리스트 안에서 setState를 호출하면 무한 루프가 발생할 수 있으니 주의하세요.

📎 추가 팁

항상 리스트를 작성할 때는 '만약에 항목이 추가되거나 삭제되면 어떻게 될까?'를 먼저 고민해보세요.

그리고 그 상황에서 리액트가 정상적으로 동작할 수 있도록 key, 조건, 구조화를 잘 챙기면 리스트 출력이 훨씬 안정적이고 효율적이게 됩니다.

지금까지 리액트에서 리스트 데이터를 출력하는 다양한 방법들을 함께 알아봤어요.

단순한 배열부터 복잡한 객체 리스트, 그리고 조건부 렌더링과 컴포넌트 분리까지 단계별로 정리해봤는데요.

하나씩 실습해보면서 익숙해지다 보면 어느새 자연스럽게 리스트 데이터를 다룰 수 있게 될 거예요 😊

핵심은 항상 “가독성과 유지보수성”입니다.

데이터를 잘 출력하는 것보다 중요한 건 나중에 누가 봐도 이해하기 쉬운 코드를 작성하는 거예요.

이번 글이 여러분의 리액트 실력을 한층 끌어올리는 계기가 되었길 바랍니다!