Modern React 2

조건부 렌더링

::특정 조건에 따라 다른 결과물을 렌더링

• "*"표시가 특정조건인 경우에만 붙게 하려면..?

<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>
  )
  // 1. true 는 자바스크립트 값이기 때문에 중괄호로 감쌈
// 2.  Hello 컴포넌트에서는 isSpecial 이 true 이냐 false 이냐에 따라서 컴포넌트의 좌측에 * 표시되게..
// 3. 그리고 isSpecial={true}말고 isSpecial 만 써도 true로 간주
}

export default App;

<Hello.js>
import React from 'react';

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

//4. isSpecial 값이 true 면 <b>*</b> ,아니면 null.
// 참고로 JSX 에서 null, false, undefined 렌더링하면 아무것도 나타나지 않음.
//5. 단순히 조건에 따라 보이고 안보이고라면 삼항연산자보다는 && 연산자가 더 간편
=====>
function Hello({ color, name, isSpecial }) {
  return (
    <div style={{ color }}>
      {isSpecial && <b>*</b>}
      안녕하세요 {name}
    </div>
  );
}
//6. isSpecial && <b>*</b> 의 결과 ; isSpecial 이 false 면 false, isSpecial이 true 일 땐 <b>*</b>. 


Hello.defaultProps={
    name : '이름없음 앞에서 name속성지움쓰'
}

export default Hello;