[React] 조건부 렌더링

조건부 렌더링이란?

특정 조건이 참인지 거짓인지에 따라서 다른 결과를 보여주는것.

Hello 컴포넌트 내부에서 조건부 랜더링.

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

삼항연산자 사용하여 true일때, false일때 다른 결과물 보여주기

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

&&사용하여 true일때만 별표 표시 나타나게도 해줄 수 있음.

function Hello({color, name, isSpecial}){
    return (
        <div style={{
            color
        }}>
            <b>{isSpecial ? '스페셜!':'낫스페셜'}</b>
            안녕하세요 {name}
        </div>
    );  
}

이렇게 true, false에 따라 값이 다를 때 말고는 &&연산자 사용하여 나타내는게 더 깔끔함

function App() {
  
  return (
    
    //Hello Component
    //props를 전달하는 과정 
    // 태그가 두개 이상이므로 fragment로 감싸주기.
    <Wrapper>
      {/* true는 js 값이므로 {}로 감싸준다. */}
      <Hello name="react" color="red" isSpecial/>
      <Hello  color="pink"/>
    </Wrapper>
  )
}

isSpecial = {true}
없이 그냥 isSpecial하면 true가 된다.
boolean 사용할 때 참조하기