1. 조건부 렌더링 이란?

특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미 한다.

보통 삼항 연산자를 사용하거나, AND 연산자를 사용해야 한다.
if문은 사용할수없고, 사용하려면 IIFE(즉시실행 함수 표현) 을 사용해야한다.

class App extends Component {
  render() {
    const value = 1;
    return (
      <div>
        {
          (function() {
            if (value === 1) return (<div>하나</div>);
            if (value === 2) return (<div>둘</div>);
            if (value === 3) return (<div>셋</div>);
          })()
        }
      </div>
    );
  }
}

1. 삼항연산자 사용
-> true or false 일때, 다른 결과값을 보여준다.
∴ 내용이 달라져야 할 때 사용함!!

function Hello({ color, name, isSpecial }) {
  return (
    <div>
      { isSpecial ? <b>*</b> : null }
      안녕하세요 {name} 
    </div>
  );
}

2. && 연산자 사용
-> 단순히 어떤 값을 숨기거나 넣어줄 때는 && 연산자 이용.

function Hello({ color, name, isSpecial }) {
  return (
    <div>
      { isSpecial  && <b>*</b> }
      안녕하세요 {name}
    </div>
  );
}