React 기본 - 6.조건부 렌더링

조건부 렌더링
특정 조건에 따라 다른 결과물을 렌더링 한는 것을 의미합니다.
보통 처리할때 기본적으로 삼항연산자를 사용합니다. JSX dptj null, false, undefined 렌더링하면 아무것도 나타나지 않음.
App 컴포넌트에서 Hello 컴포넌트를 사용 할 때, active 라는 props를 설정을 가정

App.js

import React from 'react';
import Hello from './Hello';
import Inner from "./Inner";

function App() {
  return (
      <React.Fragment>
          <Inner>
          // 자바스크립트의 값이기 때문에 true 중괄호 감싸기
          <Hello name="react!" color="red" active={true}/>
          <Hello color="pink"/>
          <Hello/>
          </Inner>
      </React.Fragment>
  );
}

export default App;

Hello.js

import React from 'react';

function Hello({color, name, active}) {
    return (
        <div style={{color}}>
        // active 값이 true 라면 * 노출
		// false 일 경우 null
        {active ? <b>*</b> : null}
        Hello, {name}
        </div>
    )
}

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

 && 연산자
조건부 렌더링에서 단순하게 보여주고 숨기는 처리라면 && 연산자를 사용하는 것이 좋습니다.
예를 들어, A 가 Truthy 한 값이라면, B 가 결과값이 됩니다. 반면, A 가 Falsy 한 값이라면 결과는 A 가 됩니다.

Hello.js

import React from 'react';

function Hello({color, name, active}) {
    return (
        <div style={{color}}>
        // && 연산자 사용
        {active && <b>*</b>}
        Hello, {name}
        </div>
    )
}

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

props 값 설정 생략 ={ture}
컴포넌트의 props 값을 설정하게 될 때 만약 props 이름만 작성하고 값 설정을 생략한다면, 이를 ture 로 설정한 것으로 간주합니다.

App.js

import React from 'react';
import Hello from './Hello';
import Inner from "./Inner";

function App() {
  return (
      <React.Fragment>
          <Inner>
          // props 값 설정 생략
          <Hello name="react!" color="red" active/>
          <Hello color="pink"/>
          <Hello/>
          </Inner>
      </React.Fragment>
  );
}

export default App;