조건부 렌더링

🌟 조건부 렌더링(Conditional Rendering)

React에서는 조건에 따라 특정 UI를 렌더링하거나 숨길 수 있어.

웹 개발에서 사용자 경험을 개선하기 위해 자주 사용하는 패턴이지.

 

🔧 조건부 렌더링을 구현하는 방법들

1️⃣ if 문 사용

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

 

💡 설명:

• isLoggedIn 값에 따라 다른 메시지를 보여줌.
• 컴포넌트 내에서 명확한 조건 처리가 가능함.

 

2️⃣ 삼항 연산자 사용 (? :)

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

💡 설명:

• isLoggedIn이 참이면 "환영합니다!"를, 거짓이면 "로그인해주세요!"를 보여줌.
• 짧은 코드로 조건부 렌더링 가능.

 

3️⃣ 논리 연산자 (&&)

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

💡 설명:

• hasNewMessage가 참일 때만 <p> 태그가 렌더링됨.
• 거짓이면 아무것도 렌더링하지 않음.

 

4️⃣ 즉시 리턴 패턴

리턴 조건을 빠르게 끝내고, 남은 렌더링 부분을 명확하게 구성하는 패턴이야.

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

 

💡 설명:

• 조건이 맞지 않으면 즉시 리턴하여 복잡성을 줄임.

 

 

📝 조건부 렌더링 연습문제

조건부 렌더링을 사용해서 다음 요구사항을 구현해봐:

• 사용자가 입력 필드에 이름을 입력하면 "환영합니다, [이름]" 메시지를 보여줘.
• 입력 필드가 비어있으면 "이름을 입력해주세요!" 메시지가 보여야 해.
• if 문, 삼항 연산자, && 중 원하는 방식으로 문제를 풀어봐.