[React] Conditional Rendering, 조건문을 이용해 렌더링하기

Conditional Rendering (조건부 렌더링)

: 조건문(if)에 따라 다른 결과를 렌더링하는 것

---

Element Variable

: element를 변수에 넣어 사용하는 방법입니다.

1) 변수 button을 생성하여 조건에 따라 element값을 넣어줍니다.

// JSX
let button;
if (isLoggedIn) {
	button = <LogoutButton onClick={LogoutClick} />;
} else {
  	button = <LoginButton onClick={LoginClick} />;
}

2) 생성한 button을 변수와 같이 사용합니다.

// JSX
~~
return (
	<div>
    	{button}
  	</div>
)
~~

---

Inline Conditions

: 코드 라인안에 조건문을 넣는 방법입니다.

// JSX
~~
return (
	<div>

  	</div>
)
~~

• 위의 div 태그 사이에 if식을 넣을 수 없어 Inline 조건문을 넣어야합니다.

1) Inline if

// JSX
~~
return (
	<div>
    	{isLoggedIn &&
      		<h1>환영합니다.</h1>
    	}
  	</div>
)
~~

• && 연산자를 이용합니다. 조건이 false인 경우 h1태그는 렌더링되지 않습니다.
• 조건에 number 변수를 넣었을때 0인경우 0이 그대로 출력되므로 주의합니다.

2) Inline if-else

// JSX
~~
return (
	<div>
    	{isLoggedIn 
    		? <LogoutButton onClick={LogoutClick} />
      		: <LoginButton onClick={LoginClick} />
    	}
  	</div>
)
~~

• 3항 연산자라고 부르는 ? 연산자를 이용합니다.