👓 조건부 렌더링

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


Hello 컴포넌트에서는 isSpecial이 true인지 false인지에 따라서 하잇 이라는 문구를 삼항연산자를 이용해 보여지게 하겠다.
<app.js>

import React from 'react';
import Hello from './components/hello';
export default function App () {
  return (
    <>
      <Hello name="anne" color="pink" isSpecial={true} />
      <Hello color="pink" />
    </>
  );
}

<hello.js>

import React from 'react';
export default function Hello ({ color, name, isSpecial }) {
  return (
    <div style={{ color }}>
      { isSpecial ? '하잇' : '땡' }
      안녕하세요 {name}
    </div>
  );
}
Hello.defaultProps = {
  name: '이름없음'
}

📃 && 연산자 사용하기
단순하게 특정 조건이 true 이면 보여주고 그렇지 않으면 숨겨주기 때문에 이러한 상황에서는 && 연산자를 사용해서 처리하는 것이 더 간편하다.
<app.js>

import React from 'react';
import Hello from './components/hello';
export default function App () {
  return (
    <>
      <Hello name="anne" color="pink" isSpecial />
      {/*
        컴포넌트의 props 값을 설정하게 될 때
        props 이름만 작성하고 값 설정을 생략한다면
        이를 true로 설정한 것으로 간주한다.
      */}
      <Hello color="pink" />
    </>
  );
}

<hello.js>

import React from 'react';
export default function Hello ({ color, name, isSpecial }) {
  return (
    <div style={{ color }}>
      { isSpecial && '하잇' }
      안녕하세요 {name}
    </div>
  );
}
Hello.defaultProps = {
  name: '이름없음'
}