[React] props.isSpecial (isSpecial) 조건부 렌더링

조건부 렌더링이란, 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미합니다.

 

// App.js
import React from 'react';
import Hello from './Hello.js';
import Wrapper from './Wrapper.js';

function App() {
  return (
    <Wrapper>
      {/* Hello 컴포넌트를 사용할 때, isSpecial 이라는 props를 설정 */}
      <Hello name="react" color="red" isSpecial/> { /* isSpecial 만 써도 isSpecial={true}로 간주함 */ }
      <Hello color="pink" />
    </Wrapper>
  );
}

export default App;

 

 

// Hello.js
import React from 'react';

function Hello({ color, name, isSpecial }) {
  return (
    <>
      <div style={{ color }}>
        { /* javascript에서는 null,false,undefined를 렌더링 하면 아무것도 나타나지 않는다. */}
        { isSpecial ? <b>*</b> : null }

        { /* 이렇게 간단하게 쓸 수 있다.
        isSpecial 이 false 일땐 false 이고, isSpecial이 true 일 땐 <b>*</b> */}
        { isSpecial && <b>*</b> }
        안녕하세요 {name}
      </div>
    </>
  );
}

Hello.defaultProps = {
  name: 'Null'
}

export default Hello;