처음 만난 리액트(React) : section 9. Conditional Rendering

💡 Conditional Rendering의 정의와 Inline Conditions

Conditional Rendering

조건부 렌더링

어떠한 조건에 따라서 렌더링이 달라지는 것

// UserGreeting, GuestGreeting Function Component

// 이미 회원인 사용자에게 보여주는 메시지 출력
function UserGreeting(props) {
  	return <h1>다시 오셨군요!</h1>;
}

// 아직 가입하지 않은 사용자에게 보여주는 메시지 출력
function GuestGreeting(props) {
  	return <h1>회원가입을 해주세요.</h1>;
}

// 조건부 사용

// isLoggedIn 변수의 값이 true면 UserGreeting Component return
// 그렇지 않으면 (false) GuestGreeting  Component return
function Greeting(props) {
  	const isLoggedIn = props.isLoggedIn;
  
  	if (isLoggedIn) {
      	return <UserGreeting />;
    }
  	return <GuestGreeting />;
}

// Props에 들어오는 isLoggedIn의 값에 따라서 화면에 출력되는 값이 다름

JavaScript의 Truthy와 Falsy

• 보통 Boolean 자료형
  • 참(True)/ 거짓(False)

Truthy

true는 아니지만 true로 여겨지는 값

Falsy

false는 아니지만 false로 여겨지는 값

// truthy
true
{} (empty object)
[] (empty array)
42 (number, not zero)
"0", "false" (string, not empty)

// falsy
false
0, -0 (zero, minus zero)
On (BigInt zero)
'', "", `` (empty string)
null
undefined
NaN (not a number)

Element Variables

조건부렌더링에서 렌더링 해야하는 컴포넌트를 변수처럼 다루는 방법

// Login, Logout Component

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);
    }
    
    // isLoggedIn의 값에 따라서 버튼의 변수에 Component를 대입
    let button;
  	if (isLoggedIn) {
      	button = <LogoutButton onClick={handleLogoutClick} />;
    } else {
      	button = <LoginButton onClick={handleLoginClick} />;
    }

	return (
      <div>
      		<Greeting isLoggedIn={isLoggedIn} />
			// return에 넣어 실제로 Component Rendering (Component로부터 생성된 리액트 Element)
			{button}
		</div>
	)
}

Inline Conditions

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

Inlin If

If문을 필요한 곳에 직접 집어넣는 것

• If문과 동일한 효과를 위해 && (논리)연산자를 사용
  • true && expression → expression
  • false && expression → false

funciton Mailbox(props) {
  	const unreadMessages = props.unreadMessages;
  
  	return (
      <div>
      	<h1>안녕하세요!</h1>
      	// 결과값에 따라서 렌더링 판단
      	// unreadMessages가 0보다 크다면 뒤 h2가 렌더링
        {unreadMessages.length > 0 &&
      		<h2>
      			현재 {unreadMessages.length}개의 읽지 않은 메시지가 있습니다.
    		</h2>
		}
    </div>
  );
}

// && 연산자의 패턴이 자주 사용하니 기억하기

Inline If-Else

If-Else문을 필요한 곳에 직접 집어넣는 것

• 조건문의 값에 따라서 다른 element를 보여줄 때 사용
• 삼항 (?)연사자 사용

문자열 사용

function UserStatus(props) {
  	return (
      	<div>
      	// true일 경우 로그인, false면 로그인하지 않은 문자열 출력
      	이 사용자는 현재<b>{props.isLoggedIn ? `로그인` : `로그인하지 않은`}</b> 상태입니다.
		</div>
	)
}

Element 사용

function LoginControl(props) {
  	const [isLoggedIn, setIsLoggedIn] = useState(false);
  
  	const handleLoginClick = () => {
      	setIsLoggedIn(true);
    }
    
    const handleLogoutClick = () => {
      	setIsLoggedIn(false);
    }
    
    return (
      	<div>
      		<Greeting isLoggedIn={isLoggedIn} />
			// isLoggedIn의 값이 true이면 logout button
			// false면 login button
			{isLoggedIn
				? <LogoutButton onClick={handleLogoutClick} />
 				: <LoginButton onClick={handleLoginClick} />
			}
 		</div>
 	)
}

// 이처럼 조건에 따라 값이 다른 Element을 Rendering할 때 사용

Component 렌더링 막기

null을 리턴하면 렌더링되지 않음

// WarningBanner Component
function WarningBanner(props) {
  	if (!props.warning) {
      	// 값이 false에 null return
      	return null;
    }

	return (
      	// 값이 true에 경고! 출력
      	<div>경고!</div>
    );
}

function MainPage(props) {
  	const [showWarning, setShowWarning] = useState(false);
  
  	const handleToggleClick = () => {
      	setShowWarning(prevShowWarning => !prevShowWarning)
    }
    
    return (
      <div>
      //showWarning의 state 값을 WarningBanner Component에 Props에 전달
      // showWarning의 값에 따라 경고문을 표시
      	<WarningBanner warning={showWarning} />
		<button onClick={handleToggleClick}>
          {showWarning ? '감추기' : '보이기'}
		</button>
	</div>
   )
}

❕ 특정 Component를 Rendering하고 싶지 않을 경우 Null를 Return
❕ Class Component Rand 함수에서 Null를 Return하는 것은 컴포넌트 생명주기 함수에 전혀 영향이 미치지 않음