4. 조건에 따라 다른 컴포넌트를 렌더링하기

아래 코드에서 isSpecial 값에 따라 컴포넌트의 좌측에 * 을 표시해보자!

(true 값은 자바스크립트 값이기 때문에 { }로 감싸서 표현해주어야 한다.)

 

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 }
      Hello {name}
    </div>
  );
}

Hello.defaultProps = {
  name: '이름없음'
}

export default Hello;

 

(참고로, JSX에서 null, false, undefined를 렌더링하면 아무것도 나타나지 않는다고 한다.)

​

근데, 위 처럼 그저 true/false에 따라 무언가를 분기처리해주어야 할 때에는 && 연산자를 사용하는 것이 더 편리하다.

​

두 번째 방법, && 연산자를 이용하기 (단축 평가 논리 계산법)

import React from 'react';

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

Hello.defaultProps = {
  name: '이름없음'
}

export default Hello;

이때, props를 설정할 때 props의 이름만 지정하고, 값은 생략한다면 값을 true 로 설정한 것으로 간주된다!

 

<Hello name="react" color="red" isSpecial />

 

---

출처 : https://react.vlpt.us/basic/06-conditional-rendering.html