조건부 렌더링

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

• 조건부 렌더링을 할 때, 가장 기본적인 방법은 삼항연산자를 사용하는 것이다.

  // app.js
  import React from 'react';
  import Hello from './Hello';
  import Wrapper from './Wrapper';
  
  function App() {
    return (
      <Wrapper>
        <Hello name="react" color="red" isSpecial={true}/>
        <Hello color="pink" />
      </Wrapper>
    )
  }
  
  export default App;

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

  삼항연산자를 사용한 조건부 렌더링은 주로 특정 조건에 따라 보여줘야 하는 내용이 다를 때 사용한다. 내용이 달라지는게 아니라, 단순히 특정 조건이 true이면 보여주고, 그렇지 않으면 숨기는 상황에선 && 연산자를 사용해 처리하는 것이 더 간편하다.

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

  isSpecial && <b>*</b> 은 isSpecial이 false일땐 false이고, isSpecial이 true일 땐 <b>*</b>가 된다.
  

props 값 설정을 생략하면 ={true}

→ 컴포넌트의 props 값을 설정할 때, props 이름만 작성하고 값 설정을 생략하면 true로 설정한 것으로 간주한다.

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

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red" isSpecial />
      <Hello color="pink"/>
    </Wrapper>
  );
}

export default App;

이렇게 isSpecial 이름만 넣어주면 **isSpecial={true}**와 동일한 의미이다.