[React] 조건부 렌더링

조건부 렌더링이란 특정 조건이 참인지 거짓인지에 따라서 다른 결과를 보여주는 것을 의미한다.

App.js

function App() {
  return (
    <Wrapper>
    <Hello name="jenny "color="red" isSpecial={true} /> <Wrapper>)}

true는 자바스크립트 값이기 때문에 중괄호로 감싸주어야한다. Hello 컴포넌트에서 isSpecial값이 true면 *표시가 나오도록 해준다. 이 기능은 '삼항연산자'를 통해서 구현해준다.

Hello.js

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

App.js 내에서 isSpecial가 {true}면 아래와 같이 출력된다.

근데 사실 참이나 거짓에 따라 내용이 숨겨지고 나타나는 것은 삼항연산자 보다 &연산자가 더 효과적이다.

{isSpecial && <b>*</b> : null}

결론

특정 부분이 참,거짓에 따라 단순히 내용이 숨겨지고 나타나기를 원하면 ==> &연산자

참,거짓에 따라 내용이 각각 달라지기를 원하면 ==> 삼항연산자