React 시작하기 3. 조건부 렌더링

App.js

 

import React from 'react';
import Sample from './Sample';  // Sample component 불러오기

function App() {
  return (
    // true는 생략하면 true임, 하단 두 <Sample> 은 같은 결과를 출력함.
    // <Sample name="is sample" isSpecial></Sample>
    <div>
      <Sample name="is sample" isSpecial={true}></Sample>
    </div>
  );
}

export default App;

 

Sample.js

// 컴포넌트 생성을 위해 React Import
import React from 'react';

/**
 * [Props sample]
 * @param {*} props 전달 데이터
 * @returns 
 */
function Sample({ name, isSpecial }) {
  const style = {
    border: '5px solid red',
    padding: '10px',
  }
  return (
    <div style={style}>
      { isSpecial ? <b>*</b> : null }
      { name }
    </div>
  )
}

Sample.defaultProps = {
  name: 'non',
}

// 컴포넌트 내보내기 (다른 컴포넌트에서 불러오기 위해!!)
export default Sample;