[React 조건부 렌더링]

[keyword]
조건부 렌더링, if문, 논리 연산자 &&, 조건부 연산자(=삼항연산자)

✔️ React에서 조건부 렌더링하는 세 가지 방법
1. if문으로 표현하기
2. 논리 연산자 &&
3. 조건부 연산자(=삼항 연산자)

( 조건부 렌더링이란, React에서 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링 하는 것.
JavaScript 연산자를 활용해 현재 상태를 나타내는 엘리먼트 만들면, React가 현재 상태에 맞게 UI를 업데이트함.
React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작함.)


상태에 맞게 여러 컴포넌트 중 하나를 보여주는 컴포넌트를 만들어 조건부 렌더링 할 수 있음.
출력의 다른 부분은 변하지 않은 채로, 컴포넌트의 일부를 조건부로 렌더링 할 수 있음.

---

1. if문으로 표현하기

⬇️ 현재 상태에 맞게 <LoginButton />이나 <LogoutButton />을 렌더링하는 예시

if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        {button}
      </div>

2. 논리 연산자 &&로 if를 인라인으로 표현하기
JavaScript에서
true && expression은 항상 expression / false && expression은 항상 false
따라서, && 뒤의 엘리먼트는 조건이 true일때 출력 됨. 조건이 false라면 React는 무시함.
(❕false로 평가될 수 있는 표현식을 반환하면 && 뒤에 있는 표현식은 건너뛰지만 false로 평가될 수 있는 표현식이 반환됨 주의)

3. 조건부 연산자(=삼항 연산자)로 if-else구문 인라인으로 표현하기
condition ? true: false

⬇️ 짧은 구문을 조건부로 렌더링하는 예시

render() {
 const isLoggedIn = this.state.isLoggedIn;
 return (
   <div>
     The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
   </div>
 );
}

---

참고자료:
[1] https://ko.reactjs.org/docs/conditional-rendering.html