조건부 렌더링

📌 삼항연산자 사용하여 조건부 렌더링

조건 ? 참일 경우 실행할 내용 : 거짓일 경우 실행할 내용;

{
	// 조건
	itemList.length === 0 ? (
		// 참일 경우 실행할 내용
		<p className='no-data'>목록이 없습니다.</p>
	) : (
		// 거짓일 경우 실행할 내용
		itemList.map((item) => (
			<item key={item.id} title={item.title} />
		))
	)
}

 

 

 

📌 AND 연산자(&&) 사용하여 조건부 렌더링

두 조건 모두 참인 경우 참

조건을 만족할 때만 내용을 보여 주고, 만족하지 않을 때 아무것도 랜더링되지 않아야 하는 상황에서 사용한다.

{
	itemList.length === 0 && (
		<p className='no-data'>목록이 없습니다.</p>
	)
}
{
	itemList.length > 0 &&
		itemList.map((item) => (
			<item key={item.id} title={item.title} />
	))
}

• 조건이 참(Truthy)일 때, 오른쪽의 표현식이 렌더링된다.
• 조건이 거짓(Falsy)일 때, 오른쪽의 표현식은 평가되지 않고 false로 간주되어 렌더링되지 않는다.

🔥 리액트는 조건부 렌더링에서 false, undefined, null, 0, NaN과 같은 Falsy한 값들은 렌더링하지 않는다. 

 

 

📌 자바스크립트 변수를 사용하여 조건부 렌더링

// 리스트가 없을 경우로 초기화
let listContent = <p>목록이 없습니다.</p>;

// 리스트가 있을 경우 렌더링
if (itemList.length > 0) {
	listContent = itemList.map((item) => (
		<item key={item.id} title={item.title} />
	));
}

return (
	{listContent}
)

• if (itemList.length > 0)을 사용하여 itemList 배열의 길이를 확인한다.
• 배열이 비어 있지 않으면 listContent 초기값을 덮어써서 <item />를 렌더링한다.
• 배열이 비어 있으면 <item />를 무시하고, 초기값 <p>목록이 없습니다.</p>를 렌더링 한다.

 

 

📌 컴포넌트를 사용하여 조건부 렌더링

조건부 렌더링 UI가 담긴 컴포넌트에 데이터를 전달한다.

if (props.items.length === 0) {
	return <p>목록이 없습니다.</p>;
}

return (
	<ul className='list'>
		{props.items.map((item) => (
			<item key={item.id} title={item.title} />
		))}
	</ul>
);

• if (props.items.length === 0)이 true이면 <p>목록이 없습니다.</p>를 렌더링하고, 함수는 종료된다.
• if (props.items.length === 0)이 false이면 <ul className='list'>...</ul>를 렌더링하고, 함수는 종료된다.

🔥 렌더링을 위한 로직(props.items.length === 0)을 분리했고, 조건에 따라 다른 JSX코드를 반환할 수 있다는 이점이 있다.