본문 바로가기
Front-end/React

여러 개의 컴포넌트 렌더링하기

by mooyou 2025. 1. 14.
728x90
300x250
SMALL

리액트에서 여러 개의 컴포넌트를 렌더링하는 것은 매우 일반적인 작업이다.

여러 개의 컴포넌트를 렌더링하려면, 주로 배열이나 반복문을 사용하여 컴포넌트들을 동적으로 생성하고 렌더링한다.

컴포넌트를 여러 개 렌더링하는 과정에서 중요한 점은 리스트 렌더링, 조건부 렌더링, 그리고 고유한 키(key)설정이다.

다음은 여러 개의 컴포넌트를 렌더링하는 방법에 대한 자세한 설명이다.

 


 

1. 배열을 사용하여 컴포넌트 렌더링하기

리액트에서는 배열을 사용하여 여러 개의 컴포넌트를 동적으로 렌더링할 수 있다. 배열의 각 항목을 맵핑하여 컴포넌트로 변환한다.

import React from "react";

// 아이템을 표시할 컴포넌트
function Item({ name }) {
  return <div>{name}</div>;
}

function ItemList() {
  const items = ["Apple", "Banana", "Orange"];

  return (
    <div>
      {items.map((item, index) => (
        // 배열을 순회하면서 각각의 아이템을 렌더링
        <Item key={index} name={item} />
      ))}
    </div>
  );
}

export default ItemList;

 

items.map((item, index) => (...))  map()함수는 배열의 각 항목을 순회하면서, 해당 항목을 <Item />컴포넌트로 변환한다.

각 항목에는 key 속성이 필수적으로 설정되어야 한다. 이 key는 React가 각 컴포넌트를 고유하게 식별하고, 효율적으로 업데이트 하는 데 필요하다.

 


 

2. 조건부 렌더링을 사용하여 여러 컴포넌트 렌더링하기

조건부 렌더링을 사용하면 특정 조건에 따라 컴포넌트를 렌더링하거나 렌더링하지 않을 수 있다.

여러 컴포넌트를 조건에 맞춰 동적으로 렌더링할 때 유용하다.

import React, { useState } from "react";

function Message({ text }) {
  return <div>{text}</div>;
}

function MessageList() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const loginMessages = ["Welcome back!", "You have new notifications."];
  const logoutMessages = ["Please log in to continue.", "New updates available."];

  return (
    <div>
      {isLoggedIn
        ? loginMessages.map((msg, index) => <Message key={index} text={msg} />)
        : logoutMessages.map((msg, index) => <Message key={index} text={msg} />)}
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? "Log out" : "Log in"}
      </button>
    </div>
  );
}

export default MessageList;

 

isLoggedIn상태에 따라 다른 메시지를 렌더링한다.

  • 로그인 상태에서 loginMessages 배열을 순회하며 메시지를 렌더링 한다.
  • 로그아웃 상태에서는 logoutMessages 배열을 순회하면서 메시지를 렌더링한다.

 

3. 반복문을 사용하여 컴포넌트 렌더링

리액트에서 여러 개의 컴포넌트를 반복문 (for나 while)을 사용하여 렌더링할 수 있다.

하지만 map()을 사용하는 것이 더 일반적이다.

import React from "react";

function Item({ name }) {
  return <div>{name}</div>;
}

function ItemList() {
  const items = ["Apple", "Banana", "Orange"];
  const itemComponents = [];

  for (let i = 0; i < items.length; i++) {
    itemComponents.push(<Item key={i} name={items[i]} />);
  }

  return <div>{itemComponents}</div>;
}

export default ItemList;

 

for문을 사용하여 items배열의 각 항목에 대해 <Item /> 컴포넌트를 생성하고, 이를 itemComponents배열에 저장한 후 렌더링한다.

 


 

4. 컴포넌트 내부에서 여러 컴포넌트 렌더링하기

하나의 컴포넌트에서 다른 여러 컴포넌트를 렌더링할 수도 있다. 이를 통해 더 복잡한 UI구조를 만들 수 있다.

import React from "react";
import UserProfile from "./UserProfile";
import UserPosts from "./UserPosts";
import UserSettings from "./UserSettings";

function Dashboard() {
  return (
    <div>
      <UserProfile />
      <UserPosts />
      <UserSettings />
    </div>
  );
}

export default Dashboard;

 

Dashboard 컴포넌트는 UserProfile, UsePosts, UserSettings와 같은 여러 다른 컴포넌트를 내부에서 렌더링하고 있다.

 


 

5. 다양한 조건에 따른 여러 컴포넌트 렌더링

리액트에서 여러 개의 컴포넌트를 렌더링할 때 복잡한 조건에 따라 렌더링되는 컴포넌트를 선택할 수도 있다.

예를 들어, 로딩 중, 오류 발생, 성공적인 데이터 로딩 등 다양한 상황에 맞춰 렌더링을 제어할 수 있다.

import React, { useState, useEffect } from "react";

function DataFetcher() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    setTimeout(() => {
      // 데이터 로딩 시뮬레이션
      setData({ message: "Data loaded successfully!" });
      setLoading(false);
    }, 2000);
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return <div>{data.message}</div>;
}

export default DataFetcher;

 

loading 상태에 따라 로딩메시지를 보여준다.

데이터가 성공적으로 로드되면 데이터를 렌더링하고

오류가 발생하면 오류 메시지를 표시한다.

 

 

728x90
반응형
LIST

'Front-end > React' 카테고리의 다른 글

리액트에서 키(key)  (0) 2025.01.13
리액트에서 리스트(List)란?  (0) 2025.01.12
로그인 여부를 나타내는 툴바 만들기 - 비공개  (0) 2025.01.10
React에서 key 속성이란?  (0) 2025.01.09
React.memo란?  (0) 2025.01.08

댓글