조건부 렌더링과 리스트 다루기 핵심 가이드

웹 애플리케이션에서 "조건에 따라 무언가를 보여주거나 감춘다"와 "반복되는 데이터 모음을 화면에 출력한다"는 것은 개발의 필수 요소입니다. React는 이런 동적 화면 구성을 매우 직관적으로 다룰 수 있는 방법들을 제공합니다. 이번 장에서는 실제 현장에서 바로 활용할 수 있는 조건부 렌더링과 리스트 출력의 원리, 그리고 실용적인 팁들을 집중적으로 살펴봅니다.

조건부 렌더링: 상황에 맞는 UI를 그리자

사용자의 로그인 유무, 데이터 로딩 상태 등 다양한 조건에 따라 UI를 변화시키는 것을 React에서는 "조건부 렌더링"이라 부릅니다. 컴포넌트 내부에서 보통 if문이나 논리 연산자(&&), 삼항 연산자(? :)를 활용합니다.

예를 들어, 사용자가 로그인했을 때만 환영 메시지를 보이고 싶다면 다음과 같이 구현할 수 있습니다.

function Greeting({ isLoggedIn }) {
  return isLoggedIn ? <h2>환영합니다!</h2> : <h2>로그인해주세요.</h2>;
}

더 간단히, JSX 안에서 조건이 true일 때만 특정 컴포넌트를 출력하려면 다음처럼 합니다.

{isLoading && <p>로딩 중...</p>}

필요에 따라 return문에서 조건에 따라 null을 반환하면 화면에 아무것도 나타나지 않습니다.

반복되는 데이터를 위한 리스트 렌더링

리스트 형태의 데이터(예: 게시글, 유저 목록 등)를 화면에 출력하는 경우는 아주 흔합니다. React에서는 자바스크립트의 map() 함수를 직접 쓰면서, 각 항목을 컴포넌트로 바꿔 렌더링하게 됩니다.

const users = [
  { id: 1, name: '민준' },
  { id: 2, name: '지수' },
  { id: 3, name: '서연' },
];

function UserList() {
  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

여기서는 각 항목마다 고유한 key 값(여기선 user.id)을 지정하는 것이 중요합니다. key는 React가 요소의 변화를 신속하게 감지하여 효율적으로 UI를 업데이트하도록 도와줍니다.

조건부와 리스트를 한 번에 쓰기

실전에서는 조건부 렌더링과 리스트 렌더링을 함께 활용하는 경우가 많습니다. 예를 들어, 데이터가 없을 때 안내 메시지를 보이거나, 특정 항목만 조건에 따라 필터링해서 보여줄 수 있습니다.

function ProductList({ products }) {
  if (products.length === 0) {
    return <div>상품이 없습니다.</div>;
  }
  return (
    <ul>
      {products
        .filter(p => p.isAvailable)
        .map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

이렇게 filter와 map을 조합하면, 원하는 기준에 따라 동적으로 리스트를 구성할 수 있습니다. 필요하면 삼항 연산자까지 섞어서 더욱 유연한 UI를 만들 수 있습니다.

정리: React의 유연함을 경험하세요

조건부 렌더링과 리스트 출력은 React가 제공하는 가장 유연하고 강력한 도구입니다. 이 두 가지 개념에 익숙해지면, 복잡한 데이터 구조를 가진 대형 프로젝트 현장에서도 자신 있게 다양한 요구사항을 구현할 수 있게 됩니다. 직접 코드를 작성하며 다양한 조건과 패턴을 실험해 보세요. 이것이 진짜 React의 실전 실력입니다.