React.js | 입문 | 조건부 렌더링

개발을 하다보면 조건에 따라서 컴포넌트가 어떤것이 보여질지 정해야 하는 순간이 있는데,

이럴 땐 보통 조건부 렌더링을 쓴다.

 

보통은 전 글에서와 같이  <Hello />  이런식으로 렌더링 하지만, 조건부렌더링을 쓸 때는

 

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;

 

이런 식으로 삼항 연산자를 쓴다.

 isSpecial의 값이 true일 경우에 <b>*</b>를, false일 경우엔 null을 반환한다는 뜻이다. 

 

또 다른 방법으로는

 

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이 false일 땐 false, true일 땐 <b>*</b> 값을 나타내게 된다.

 

참조 

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