조건부 렌더링

리액트에서는 UI를 구성할 때 컴포넌트를 동적으로 렌더링하는 것이 필수입니다. 동적 렌더링이란 사용자의 상호작용이나 상태 변화에 따라 컴포넌트를 실시간으로 업데이트해 화면에 표시하는 방식을 말합니다. 동적 렌더링을 구현하는 대표적인 방법에는 조건부 렌더링과 반복 렌더링이 있습니다.

조건부 렌더링(conditional rendering)은 특정 조건에 따라 컴포넌트를 화면에 표시하거나 숨기는 방식입니다.

조건부 렌더링은 자바스크립트의 문법 중 조건 표현식을 사용하여 컴포넌트의 상태에 따라 동적으로 렌더링 하는 것을 의미한다. 자바스크립트 조건 표현식 중 조건부 렌더링에 주로 사용하는 것은 if문, 삼항 연산자, AND 논리 연산자 이다.

자바스크립트 조건 표현식

사용 방법

// if문
if (조건식1)
{ 조건식1이 참이면 실행 }
...
else if (조건식n)
{ 조건식n-1이 거짓이고, 조건식n가 참이면 실행}
else
{ 모든 조건식이 거짓일 때 실행 }

// 삼항 연산자
조건 ? (조건이 참일 때 결과) : (조건이 거짓일 때 결과)

// AND 논리 연산자
조건 && (조건이 참일 때 결과)

조건 표현식 비교

아무것도 렌더링 하고 싶지 않을 때

if문이나 삼항 연산자에서 아무것도 렌더링하고 싶지 않을 때는 null을 반환한다.

return isLogin ? <UserDashboard /> : null;

조건부 렌더링 예시

리액트에서 조건부 렌더링할 때는 return할 때 반드시 태그 한 개를 반환해야한다는 것을 유의한다. 태그 없이 표현식 { } 만 렌더링해서도 안된다.

문자열

문자열은 직접 사용할 수도, 변수에 저장해서 사용할 수도 있다.

// if 문
export default function App()
{
	const isLogin = true;
	if (isLogin) {
		return <>로그인 되었습니다.</>;
	}
	else {
		return <>로그인이 필요합니다.</>;
	}
}

// if문 + 변수
export default function App()
{
	const isLogin = true;
	let loginMessage;
	if (isLogin) {
		loginMessage = '로그인 되었습니다.';
	}
	else {
		loginMessage = '로그인이 필요합니다.';
	}
	return <>{ loginMessage }</>;
}

// 삼항 연산자
export default function App()
{
	const isLogin = true;
	return <>{ isLogin ? '로그인 되었습니다.' : '로그인이 필요합니다.' }</>;
}

// 삼항 연산자 + 변수
export default function App()
{
	const isLogin = true;
	const loginMessage = isLogin ? '로그인 되었습니다.' : '로그인이 필요합니다.';
	return <>{ loginMessage }</>;
}

// AND 논리 연산자
export default function App()
{
	const isLogin = true;
	return <>{ isLogin && '로그인 되었습니다.' }{ !isLogin && '로그인이 필요합니다.' }</>;
}

JSX 요소 & 컴포넌트

JSX 요소와 컴포넌트도 문자열처럼 직접 사용하거나, 변수에 저장해서 사용할 수 있다. 추가로 JSX의 style이나 class 등 속성값과, 컴포넌트의 props도 조건부로 렌더링 될 수 있다는 것을 알아두자.

// if 문
import Login from './components/Login'
import Logout from './components/Logout'
import LoginMessage from './components/LoginMessage'
import LogoutMessage from './components/LogoutMessage'

export default function App()
{
	const isLogin = false;
	if (isLogin) {
		return (
			<>
				<Login />
				<LoginMessage />
			</>
		);
	}
	else {
		return (
			<>
				<Logout />
				<LogoutMessage />
			</>
		);
	}
}

// if문 + 변수
import Login from './components/Login'
import Logout from './components/Logout'

export default function App()
{
	const isLogin = false;
	let loginComponent;
	if (isLogin) {
		loginComponent = <Login />;
	}
	else {
		loginComponent = <Logout />;
	}
	return <>{ loginComponent }</>;
}

// 삼항 연산자
import Login from './components/Login'
import Logout from './components/Logout'

export default function App()
{
	const isLogin = false;
	return <>{ isLogin ? <Login /> : <Logout />}</>;
}

// 삼항 연산자 + 변수
import Login from './components/Login'
import Logout from './components/Logout'

export default function App()
{
	const isLogin = false;
	const loginComponent = isLogin ? <Login /> : <Logout />;
	return <>{ loginComponent }</>;
}

// AND 논리 연산자
import Login from './components/Login'
import Logout from './components/Logout'

export default function App()
{
	const isLogin = false;
	return <>{ isLogin && <Login /> }{ !isLogin && <Logout /> }</>;
}

조건부 JSX 속성 렌더링 예시

// style 속성
export default function App()
{
	const isLogin = false;
	return (
	<>
		<h1 style = {{ color: isLogin ? 'blue' : 'black' }}>Hello, React!</h1>;
	</>
	)
}

// class 속성 조건부 렌더링
export default function App()
{
	const isLogin = false;
	return (
	<>
		<h1 className = {`main ${ isLogin && 'login' }`}>Hello, React!</h1>;
	</>
	)
}

컴포넌트 props 렌더링 예시

import Login from './components/Login'

export default function App()
{
	const isLogin = false;
	return <Login active={ isLogin && false } />;
}