React 조건부 렌더링: 실용 가이드

소개

React 에서 조건부 렌더링은 특정 조건이나 애플리케이션 상태에 따라 다른 컴포넌트나 요소를 표시할 수 있게 해주는 핵심 개념입니다. 이는 동적이고 반응성이 뛰어난 사용자 인터페이스를 구축하는 데 필수적입니다. 예를 들어, 게스트에게는 "로그인" 버튼을, 로그인한 사용자에게는 "프로필" 페이지를 보여주고 싶을 수 있습니다.

이 랩에서는 React 애플리케이션에서 조건부 렌더링을 구현하는 몇 가지 일반적인 기술을 배우게 됩니다. 기본적인 프로젝트 설정부터 시작하여 다음을 포함한 다양한 방법을 점진적으로 탐색할 것입니다.

간단한 if-else 로직을 위한 삼항 연산자 (? :).
조건이 참일 때만 요소를 렌더링하기 위한 논리 && 연산자.
더 깔끔한 JSX 를 위해 요소를 저장하는 변수 사용.
컴포넌트가 렌더링되는 것을 방지하기 위해 null 반환.
React 상태를 사용하여 표시되는 내용을 변경하는 대화형 UI 생성.

이 랩이 끝나면 애플리케이션 상태에 따라 사용자에게 무엇을 보여줄지 제어하는 방법에 대한 확실한 이해를 갖게 될 것입니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 91%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

JSX 에서 조건부 렌더링을 위한 삼항 연산자 사용

이 단계에서는 JSX 내에서 인라인 if-else 로직을 위해 조건부 (삼항) 연산자 (? :) 를 사용하는 방법을 배우게 됩니다. 이는 렌더링할 두 가지 다른 UI 요소 중에서 선택하는 간결한 방법입니다.

먼저 프로젝트 디렉토리로 이동합니다. 모든 명령은 이 디렉토리에서 실행해야 합니다.

cd ~/project/my-app

다음으로 프로젝트 종속성을 설치해야 합니다.

npm install

이제 메인 애플리케이션 컴포넌트를 수정해 보겠습니다. 왼쪽에 있는 파일 탐색기에서 src/App.jsx 파일을 엽니다. 사용자가 로그인했는지 여부에 따라 다른 메시지를 표시하는 Greeting 컴포넌트를 만들 것입니다.

src/App.jsx의 전체 내용을 다음 코드로 바꾸세요.

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}</div>
  );
}

function App() {
  return (
    <div>
      {/* isLoggedIn 을 false 로 변경하여 다른 메시지를 확인해 보세요! */}
      <Greeting isLoggedIn={true} />
    </div>
  );
}

export default App;

Greeting 컴포넌트에서 {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>} 표현식은 isLoggedIn prop 의 값을 확인합니다. true이면 "Welcome back!"을 렌더링합니다. 그렇지 않으면 "Please sign up."을 렌더링합니다.

이제 컴포넌트를 실행하여 확인하기 위해 개발 서버를 시작해 보겠습니다.

npm run dev -- --host 0.0.0.0 --port 8080

서버가 시작된 후 화면 상단의 Web 8080 탭을 엽니다. "Welcome back!" 메시지가 표시되어야 합니다. src/App.jsx에서 isLoggedIn={true}를 isLoggedIn={false}로 변경하고 파일을 저장한 다음 브라우저에서 내용이 자동으로 업데이트되는 것을 볼 수 있습니다.

단축 평가를 위한 논리 AND (&&) 연산자 적용

이 단계에서는 조건부 렌더링을 위한 또 다른 일반적인 패턴인 논리 && 연산자를 살펴보겠습니다. 이는 특정 조건이 참일 때만 요소를 렌더링하고 그렇지 않으면 아무것도 렌더링하지 않으려는 경우에 특히 유용합니다. JavaScript 에서 true && expression은 항상 expression으로 평가되고, false && expression은 항상 false로 평가됩니다. React 는 false를 아무것도 렌더링하지 않는 값으로 처리합니다.

이를 시연하기 위해 src/App.jsx 파일을 수정해 보겠습니다. 읽지 않은 메시지가 있는 경우에만 알림 수를 표시하는 컴포넌트를 추가할 것입니다.

개발 서버를 계속 실행하세요. 변경 사항을 보려면 파일을 편집하고 저장하기만 하면 됩니다.

src/App.jsx의 내용을 다음 코드로 바꾸세요.

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 && (
        <h2>You have {unreadMessages.length} unread messages.</h2>
      )}
    </div>
  );
}

function App() {
  const messages = ["React", "Re: React", "Re:Re: React"];
  // messages 를 빈 배열로 변경해 보세요: const messages = [];
  return <Mailbox unreadMessages={messages} />;
}

export default App;

이 예제에서는 unreadMessages.length > 0이 참이기 때문에 <h2> 요소가 렌더링됩니다. App 컴포넌트에서 messages 배열을 비어 있게 (const messages = [];) 변경하면 조건이 거짓이 되고 <h2> 요소가 렌더링되지 않습니다.

파일을 저장한 후 Web 8080 탭을 확인하세요. "You have 3 unread messages." 메시지가 표시되어야 합니다.

변수에 조건 저장 후 true 일 때 렌더링하기

이 단계에서는 return 문 앞에 변수에 내용을 준비하여 컴포넌트를 더 깔끔하게 만드는 방법을 배웁니다. 이 접근 방식은 조건부 로직이 삼항 연산자나 &&가 깔끔하게 처리할 수 있는 것보다 더 복잡해질 때 매우 유용합니다.

변수를 사용하면 표준 JavaScript if 문을 사용하여 컴포넌트가 무엇을 렌더링해야 하는지 결정할 수 있습니다.

이 기술을 사용하기 위해 src/App.jsx를 업데이트해 보겠습니다. prop 에 따라 "Login" 또는 "Logout" 버튼을 표시하는 컴포넌트를 만들 것입니다.

src/App.jsx의 내용을 다음 코드로 바꾸세요.

function LoginButton(props) {
  return <button>Login</button>;
}

function LogoutButton(props) {
  return <button>Logout</button>;
}

function LoginControl(props) {
  const isLoggedIn = props.isLoggedIn;
  let button;

  if (isLoggedIn) {
    button = <LogoutButton />;
  } else {
    button = <LoginButton />;
  }

  return (
    <div>
      The user is <b>{isLoggedIn ? "currently" : "not"}</b> logged in.
      {button}
    </div>
  );
}

function App() {
  return <LoginControl isLoggedIn={false} />;
}

export default App;

LoginControl 컴포넌트에서 button 변수를 선언합니다. 그런 다음 if 문이 <LoginButton /> 또는 <LogoutButton />을 할당합니다. 마지막으로 return 문의 JSX 는 단순히 {button}을 포함합니다. 이렇게 하면 렌더링 로직이 분리되고 return 문을 더 쉽게 읽을 수 있습니다.

파일을 저장하고 Web 8080 탭에서 변경 사항을 관찰하세요. "Login" 버튼이 표시되어야 합니다. isLoggedIn={false}를 isLoggedIn={true}로 변경하여 대신 "Logout" 버튼을 확인해 보세요.

조건이 false 일 때 null 또는 빈 Fragment 렌더링

이 단계에서는 컴포넌트가 전혀 렌더링되지 않도록 방지하는 시나리오를 다룹니다. 컴포넌트가 null 또는 빈 프래그먼트 (<></>) 를 반환하도록 하여 이를 달성할 수 있습니다.

이는 특정 조건에서만 표시되어야 하는 컴포넌트에 대한 일반적인 패턴입니다. 예를 들어, 실제 경고가 있을 때만 나타나야 하는 경고 배너입니다.

src/App.jsx를 수정하여 warn prop 가 true일 때만 렌더링되는 WarningBanner 컴포넌트를 포함해 보겠습니다.

src/App.jsx의 내용을 다음 코드로 바꾸세요.

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div style={{ backgroundColor: "yellow", padding: "10px", color: "black" }}>
      Warning!
    </div>
  );
}

function App() {
  // 배너를 숨기려면 이 값을 false 로 변경해 보세요.
  const showWarning = true;

  return (
    <div>
      <WarningBanner warn={showWarning} />
      <p>This is the main content of the page.</p>
    </div>
  );
}

export default App;

WarningBanner 컴포넌트에서 처음에 warn prop 를 확인합니다. false이면 컴포넌트는 즉시 null을 반환하고 React 는 해당 컴포넌트에 대해 아무것도 렌더링하지 않습니다. true이면 경고 div를 반환합니다.

파일을 저장한 후 Web 8080 탭을 확인하세요. 노란색 경고 배너가 표시됩니다. 이제 src/App.jsx로 돌아가서 const showWarning = true;를 const showWarning = false;로 변경하고 저장하세요. 배너가 페이지에서 사라집니다.

조건부 표시를 위한 상태 토글

마지막 단계에서는 조건부 렌더링과 React 의 상태를 결합하여 인터랙티브한 컴포넌트를 만들어 보겠습니다. 지금까지 우리의 조건은 prop 에 기반했습니다. 상태를 사용하면 버튼 클릭과 같은 사용자 작업에 대한 응답으로 컴포넌트의 출력을 변경할 수 있습니다.

컴포넌트의 상태를 관리하기 위해 useState hook 을 사용할 것입니다.

src/App.jsx를 수정하여 자체 isLoggedIn 상태를 관리하고 사용자가 토글할 수 있도록 하는 LoginControl 컴포넌트를 만들어 보겠습니다.

먼저 React 에서 useState를 가져와야 합니다. src/App.jsx의 내용을 다음 코드로 바꾸세요.

import { useState } from "react";

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

function LoginButton(props) {
  return <button onClick={props.onClick}>Login</button>;
}

function LogoutButton(props) {
  return <button onClick={props.onClick}>Logout</button>;
}

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

  const handleLoginClick = () => {
    setIsLoggedIn(true);
  };

  const handleLogoutClick = () => {
    setIsLoggedIn(false);
  };

  let button;
  if (isLoggedIn) {
    button = <LogoutButton onClick={handleLogoutClick} />;
  } else {
    button = <LoginButton onClick={handleLoginClick} />;
  }

  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn} />
      {button}
    </div>
  );
}

export default App;

다음은 작동 방식입니다.

import { useState } from 'react';는 useState hook 을 가져옵니다.
const [isLoggedIn, setIsLoggedIn] = useState(false);는 isLoggedIn 상태 변수를 false로 초기화합니다. setIsLoggedIn은 이 상태를 업데이트하는 데 사용하는 함수입니다.
setIsLoggedIn을 호출하여 상태를 업데이트하는 handleLoginClick 및 handleLogoutClick 함수를 정의합니다.
LoginButton 및 LogoutButton에는 onClick prop 를 통해 적절한 핸들러 함수가 전달됩니다.
Greeting 컴포넌트와 button 변수 모두 isLoggedIn 상태에 따라 달라지므로 상태가 변경될 때마다 다시 렌더링됩니다.

파일을 저장하고 Web 8080 탭으로 이동하세요. "Please sign up." 메시지와 "Login" 버튼이 표시됩니다. "Login" 버튼을 클릭하세요. 상태가 업데이트되고 UI 가 변경되어 "Welcome back!"과 "Logout" 버튼이 표시됩니다.

요약

React 조건부 렌더링에 대한 이 실습을 완료하신 것을 축하드립니다! 다양한 조건에 따라 애플리케이션이 표시하는 내용을 제어하는 가장 일반적인 기술을 배우고 연습했습니다.

이 실습에서는 다음을 다루었습니다.

간단한 인라인 if-else 로직을 위한 삼항 연산자 (? :) 사용.
조건이 충족될 때만 요소를 렌더링하기 위한 논리 && 연산자 적용.
if 문으로 더 복잡한 로직을 처리하기 위해 JSX 를 변수에 저장하여 return 문을 깔끔하게 유지.
컴포넌트에서 **null**을 반환하여 아무것도 렌더링되지 않도록 방지.
이러한 기술을 useState hook과 결합하여 사용자 작업에 응답하는 동적이고 인터랙티브한 사용자 인터페이스 생성.

이러한 패턴은 거의 모든 React 애플리케이션의 기본 구성 요소입니다. 이를 숙달하면 풍부하고 반응성이 뛰어나며 사용자 친화적인 경험을 만들 수 있습니다.