ReactJS - 조건부 렌더링

안녕하세요, 미래의 React 개발자 여러분! 오늘은 React의 가장 강력한 기능之一的 조건부 렌더링에 대해 배우겠습니다. 프로그래밍에 새로운 사람이라면 걱정하지 마세요; 이 개념을 단계별로 안내해드릴게요, 수년간 수많은 학생들을 가르친 경험을 바탕으로 말이죠. 그럼 커피(또는 차, 그게 당신의 취향이라면)를 한 잔 마시고, 이 흥미로운 여정을 함께 시작해보세요!

ReactJS - Conditional Rendering

조건부 렌더링이란?

React 특정 내용에 이전에 뛰어들기 전에, 조건부 렌더링이 정확히 무엇을 의미하는지 이야기해보겠습니다. 마법의 인사 카드를 만들고 있다고 상상해보세요. 낮이냐 밤이냐에 따라 카드가 "안녕하세요!" 또는 "좋은 저녁!" 중 하나를 말할 수 있습니다. 이게 조건부 렌더링의 핵심입니다 - 특정 조건에 따라 다른 콘텐츠를 표시하는 것입니다.

React에서도 조건부 렌더링은 이와 매우 유사하게 작동합니다. 이는 우리의 애플리케이션에서 다양한 조건이나 상태에 따라 변할 수 있는 동적 사용자 인터페이스를 만들 수 있게 해줍니다.

React에서의 조건부 렌더링

이제 React에서 조건부 렌더링을 어떻게 구현할 수 있는지 살펴보겠습니다. 가장 간단한 방법부터 시작하여 점차 더 복잡한 기술로 나아갑니다.

1. if/else 문 사용

조건부 렌더링을 구현하는 가장 직관적인 방법은 if/else 문을 사용하는 것입니다. 예제를 보겠습니다:

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

이 예제에서 Greeting 컴포넌트는 isLoggedIn prop을 받습니다. 사용자가 로그인했는지 아닌지에 따라 다른 JSX를 반환합니다.

2. 삼항 연산자 사용

if/else 문은 잘 작동하지만, 코드가 약간 길어질 수 있습니다. 삼항 연산자는 조건부를 더 간결하게 작성할 수 있는 방법입니다:

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

이 것은 이전 예제와 정확히 같은 작업을 수행하지만, 훨씬 더 간결한 형태로 작성되었습니다. 조건부 렌더링의 스위스 아ーノ이Knife!

3. 논리적 && 연산자 사용

때로는 조건이 참이면 렌더링하고, 거짓이면 아무것도 렌더링하지 않고 싶을 때가 있습니다. 이런 경우 논리적 && 연산자가 유용합니다:

function Notification({ hasUnreadMessages }) {
return (
<div>
{hasUnreadMessages &&
<p>새로운 메시지가 있습니다!</p>
}
</div>
);
}

이 예제에서 <p> 요소는 hasUnreadMessages가 참이면만 렌더링됩니다. 거짓이면 아무것도 렌더링되지 않습니다.

4. switch 문 사용

여러 조건을 확인해야 할 때 switch 문은 깔끔한 방법으로 조건부 렌더링을 처리할 수 있습니다:

function WeatherForecast({ weather }) {
switch(weather) {
case 'sunny':
return <p>아름다운 하루입니다!</p>;
case 'rainy':
return <p>우산을 잊지 마세요!</p>;
case 'snowy':
return <p>추워요, 충분히 입으세요!</p>;
default:
return <p>날씨 예보가 사용할 수 없습니다.</p>;
}
}

이 접근 방식은 여러 개의 구분된 경우를 처리할 때 특히 유용합니다.

5. 조건부 컴포넌트 렌더링

때로는 전체 컴포넌트를 조건부로 렌더링하고 싶을 때가 있습니다. 다음은 그 방법입니다:

function Dashboard({ isAdmin }) {
return (
<div>
<h1>대시보드에 오신 것을 환영합니다</h1>
{isAdmin && <AdminPanel />}
<UserPanel />
</div>
);
}

이 예제에서 AdminPanel 컴포넌트는 isAdmin이 참이면만 렌더링됩니다. UserPanel은 항상 렌더링됩니다.

고급 기술

기본 내용을 다루고 나서, 조건부 렌더링에 대한 몇 가지 고급 기술을 살펴보겠습니다.

6. 조건부 렌더링을 위한 객체 사용

때로는 많은 조건을 가질 수 있습니다. 이 경우 객체를 사용하면 코드가 더 유지보수 가능해질 수 있습니다:

const PAGES = {
home: <HomePage />,
about: <AboutPage />,
contact: <ContactPage />,
};

function App({ currentPage }) {
return (
<div>
{PAGES[currentPage] || <NotFoundPage />}
</div>
);
}

이 접근 방식은 많은 다른 페이지나 컴포넌트를 조건에 따라 렌더링할 때 특히 유용합니다.

7. HOC를 사용한 조건부 렌더링

고차 함수 컴포넌트(HOC)도 조건부 렌더링에 사용할 수 있습니다. 간단한 예제를 보겠습니다:

function withAuth(Component) {
return function AuthenticatedComponent(props) {
const isAuthenticated = checkAuthStatus(); // 이 함수를 구현하세요
if (isAuthenticated) {
return <Component {...props} />;
} else {
return <LoginPage />;
}
}
}

const ProtectedPage = withAuth(SecretPage);

이 HOC는 감싸는 컴포넌트에 인증 로직을 추가하여, 사용자가 인증되었을 때만 컴포넌트를 렌더링합니다.

결론

조건부 렌더링은 React 도구箱에서 강력한 도구입니다. 이는 우리의 사용자 인터페이스가 다양한 데이터와 사용자 상호작용에 따라 변할 수 있게 해줍니다. 프로그래밍 개념과 마찬가지로, 조건부 렌더링을 마스터하려면 연습이 중요합니다. 이 기술들을 자신의 프로젝트에 적용해보고, 곧 프로처럼 조건부 렌더링을 할 수 있을 것입니다!

기억해 두세요, 조건부 렌더링에 대해 "정확한" 방법은 하나도 없습니다. 가장 좋은 방법은 특정 사용 사례와 개인(또는 팀)의 선호도에 따라 다릅니다. 그러므로 실험을 하고, 즐기고, 행복하게 코딩하세요!

방법	설명	사용 사례
if/else 문	전통적인 조건부 논리	간단한 조건에 여러 줄의 코드가 필요할 때
삼항 연산자	간결한 조건부 표현식	간단한 조건에 짧은 표현식이 필요할 때
논리적 && 연산자	조건이 참이면 렌더링, 거짓이면 아무것도 렌더링	참이면 렌더링해야 할 때
switch 문	여러 개의 구분된 경우	여러 개의 구분된 조건을 확인할 때
조건부 컴포넌트 렌더링	전체 컴포넌트를 조건부로 렌더링	다양한 사용자 유형이 다른 UI를 필요할 때
객체 기반 렌더링	객체를 사용하여 조건을 컴포넌트에 매핑	많은 다른 페이지/컴포넌트를 렌더링할 때
HOC를 사용한 조건부 렌더링	컴포넌트에 조건부 로직을 추가	여러 컴포넌트에서 재사용할 인증 로직이 필요할 때

Credits: Image by storyset