[React] 조건부 렌더링

 

용도에 맞게

"삼항연산자" 또는"and연산자"를 이용하여

조건부 렌더링 하기

 

App.js (부모컴포넌트)

import React from 'react';
import './App.css';
import Hello from './component/Hello';
import Wrapper from './component/Wrapper';
class App extends React.Component {
  render() {
    return (
      <>
        <Wrapper>
          {/* 
            스크립트로 전달할 경우는 {}를 사용해서 값 전달 
            isSpacial로만 전달할 경우 true로 전달 되어서
            isSpacial={true}난 isSpacial이나 동일하게 적용됨
          */}
          <Hello name='react' color='red' isSpacial={true} />
          <Hello color='red' />
        </Wrapper>
      </>
    );
  }
}

export default App;

 

Hello.js (자식컴포넌트)

import React from 'react';

// 비구조 할당
const Hello = ({ color, name, isSpacial }) => {
  return (
    <div style={{ color: color }}>
     
      {/* 
        단순히 숨기고 감추는 여부만 따질 경우는
        삼함연산자보다는 and연산자를 사용하는 것이 더 용이!
      */}
      {isSpacial && <b>*</b>}

       {/* 
      
        내용이 바껴야할 경우는 
        삼항연산자가 용이
        isSpcial이 true면 *아니면 null
        
        {isSpacial ? '스페셜하다!' : '스페셜하지않다!'}

      */}
      안녕하세요
      {name}
    </div>
  );
};

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

export default Hello;

 

Wrapper.js (자식컴포넌트 - css전체적용 컴포넌트)

import React from 'react'; 

// children은 부모컴포넌트에서 Wrapper가 감싸고 있는 안에 내용 
const Wrapper = ({ children }) => 
{ const style = { border: '2px solid black', padding: 16, }; 
// {children} props를 전달 해줘야지만 css가 적용됨 
return <div style={style}>{children}</div>; }; 

export default Wrapper;

출력된 화면