# 조건부 렌더링
조건에 따라 출력하는 값이 다름
greeting이라는 함수 컴포넌트는
props로 들어오는 isLoggedIn이라는 값이 true이면 UserGreeting이라는 컴포넌트를 리턴하고,false이면 GuestGreeting이라는 컴포넌트를 리턴한다.
조건에 따라 렌더링의 결과 달라지도록 하는 것을 조건부 렌더링이라고 한다.
# JavaScript의 Truthy와 Falsy
Truthy
true는 아니지만 true로 여겨지는 값
Falsy
false는 아니지만 false로 여겨지는 값
# Element Varibles
-엘리먼트를 변수처럼 다루기-
로그인 버튼과 로그아웃 버튼
로그인 여부에 따라 로그인 버튼과 로그아웃 버튼을 선택적으로 보여주는 LoginControl 컴포넌트.
-isLoggedOn 값에 따라서 버튼이라는 변수에 컴포넌트를 대입하는 것을 볼 수 있습니다.
- 그리고 이렇게 컴포넌트가 대입된 button 변수를 리턴에 넣어, 실제로 컴포넌트가 렌더링되도록 만들고 있습니다.
- 설명은 컴포넌트라고 했지만 실제로는 컴포넌트로부터 생성되는 리액트 엘리먼트가 되겠죠.
이처럼 엘리먼트를 변수처럼 저장해서 사용하는 방법을 엘리먼트 베리어블이라고 부릅니다.
# Inline Conditions
Inline
In + Line
= 라인의 '안'
코드를 별도로 분리된 곳에 작성하지 않고 해당 코드가 필요한 곳 안에 직접 집어 넣는다는 뜻
조건문을 코드 안에 집어 넣는 것
# Inline If
if문을 필요한 곳에 직접 집어 넣어 사용하는 방법
다만 실제로 if문을 넣는 것은 아니고
if문의 경우 && 연산자를 사용
&&: logical and 연산 이라고 부르는데,
- 양쪽에 나오는 조건문이 모두 true 인 경우에만 전체 결과가 true 가 된다.
- short circuit evalation 결과가 정해져 있는 논리 연산에서 굳이 불필요한 연산을 하지 않도록 하기 위해 사용함.
unreadMessages.length 가 0보다 크면 뒤의 h2 태그가 렌더링되고, 0보다 작으면 아무것도 렌더링되지 않을 것이다.
만약 조건문에 false expressiond을 사용하면 뒤에 나오는 expression은 평가되지 않지만 false expression의 결과값이 그대로 리턴되기 때문에 주의해야 합니다. 위 코드의 결과는 화면에 아무것도 안 나오는 것이 아니라 카운터의 값인 0이 들어가서 div 태그 열고, 숫자 0, div 태그 닫고 가 됩니다.
# Inline If-Else
if else문을 필요한 곳에 직접 넣어 사용하는 방법
inline if는 보여주거나 안 보여주거나 두 가지 경우만 있었지만 inline if-else문은 조건문의 값에 따라서 다른 엘리먼트를 보여줄 때 사용한다.
삼항 연산자 ?
If-Else문의 경우 ? 연산자를 사용
- 문자열 or 엘리먼트를 넣어서 사용할 수 있습니다.
이처럼 inline if-else는 조건에 따라 각기 다른 엘리먼트를 렌더링하고 싶을 때 사용합니다.
# # Component 렌더링 막기 지금까지 조건부 렌더링하는 방법에 대해 배워봤습니다. 그렇다면 컴포넌트를 렌더링 하고 싶지 않을 때는 어떻게 해야 할까요
null 을 리턴하면 렌더링되지 않음
- props.warning의 값이 false인 경우에 null을 리턴함. 즉 아무것도 출력x
- props.warning의 값이 true인 경우 경고 메세지를 출력함
- showWarning이라는 state값을 WarningBanner(앞서 제시한) 컴포넌트의 props로 전달하여, showWarning의 값에 따라 경고 메시지를 출력하거나 하지 않게 됩니다.
이처럼 리액트에서는 특정 컴포넌트를 렌더링하고 싶지 않을 경우 null을 리턴하면 된다는 것을 기억하세요.
- 참고로 클래스 컴포넌트의 render 함수에서 null을 리턴하는 것은 컴포넌트 생명주기 함수에 전혀 영향을 미치지 않습니다. 예를 들면 ComponentDidUpdate 함수는 여전히 호출됩니다.
