[리액트] Conditional Rendering

이지민·2025년 5월 28일

리액트

목록 보기

11/15

1. Conditional Rendering 이란?

조건에 따른 렌더링(조건부 렌더링) → 어떠한 조건에 따라서 렌더링이 달라지는 것
Conditional Rendering 예시

function Greeting(props){
	const isLoggedIn = props.isLoggedIn;
	
	// 조건부 렌더링
	if (isLoggedIn){
		return <UserGreeting/>;
	}
	else{
		return <GuestGreeting/>;
	}
}

function UserGreeting(props){
	return <h1> 다시 오셨군요! </h1>;
}

function GuestGreeting(props){
	return <h1> 첫 방문이시군요. 회원 가입을 먼저 진행해주세요! </h1>;
}

2. Truthy / Falsy

Truthy → True는 아니지만 True로 여겨지는 값
Falsy → False는 아니지만 False로 여겨지는 값

3. Element Variables

리액트 엘리먼트를 변수처럼 저장하여 사용하는 방법

// 로그인 버튼 컴포넌트
function LoginButton(props){
	return(
		<button onClick = {props.onClick}>
			로그인
		</button>
	);
}

// 로그아웃 버튼 컴포넌트
function LogoutButton(props){
	return(
			<button onClick = {props.onClick}>
				로그아웃
			</button>
		);
}

function LoginControl(props){
	const [isLoggedIn, setIsLoggedIn] = useState(false);
	
	const handleLoginClick = () => {
		setIsLoggedIn(true);
	}
	
	const handleLogoutClick = () => {
		setIsLoggedIn(false);
	}
	
	let button;
	if (isLoggedIn){
		// button이라는 변수에 리액트 엘리먼트를 대입
		button = <LogoutButton onClick = {handleLogoutClick}/>;
	}
	else{
		// button이라는 변수에 리액트 엘리먼트를 대입
		button = <LoginButton onClick = {handleLoginClick}/>;
	}
	
	return(
		<div>
			<Greeting isLoggedIn = {isLoggedIn}/>
			{button}
		</div>
	)	
}

4. Inline Conditions

In + Line
조건문을 코드 안에 집어넣는 것

Inline If ⭐⭐⭐

If문의 경우 && (Logical AND) 연산자를 사용

단축 평가 (short-cut evaluation)을 활용한 방법
inline if는 && 연산자를 JSX 코드 내에서 중괄호를 사용하여 직접 집어넣는 방법

Inline If 예제
- unreadMessage.length > 0의 결과값에 따라 뒤의 리액트 엘리먼트가 렌더링 될 수도 있고 되지 않을 수도 있음.

Inline if 주의 사항 ⚠️
- && 연산에서 선행 조건문에 falsy expression을 사용하면 후행 조건문은 단축 평가에 의해 평가되지는 않지만 falsy expression의 결과값은 그대로 return되게 된다.
  - 위의 코드에서는 count의 값인 0이 return되어 화면에 표시된다.