React jsx 실습

1. if문을 쓰지 않고 연산자로 출력하기

2. 비구조화 할당

 

☆ Code

 

★ Jsx

import React from 'react';
import PassComponent from './PassComponent';
import NotPassComponent from './NotPassComponent';
import LuckyComponent from './LuckyComponent';
import UnLuckyComponent from './UnLuckyComponent';


const Jsx05 = () => {

    const age = 20;
    const [pass, notPass, lucky, unLucky] = ['입장 가능', '입장 불가', '당첨', '꽝']

    const isAdult = age >= 19;
    const isEven = age % 2 === 0;

    //const passComponent = (<div>{pass}</div>)
    //const notPassComponent = (<div>{notPass}</div>)
    //const luckyComponent = (<div>{lucky}</div>)
    //const unLuckyComponent = (<div>{unLucky}</div>)

    const enter = isAdult ? <PassComponent /> : <NotPassComponent />;
    const win = isEven ? <LuckyComponent /> : <UnLuckyComponent />

    return (
        <div>
            당신의 나이는 {age}입니다.
            {enter}
            {win}
        </div>
    );
};

 

★ LuckyComponent

import React from 'react';

const LuckyComponent = () => {
    return (
        <div>
            당첨!😊
        </div>
    );
};

export default LuckyComponent;

 

★ NotPassComponent

import React from 'react';

const NotPassComponent = () => {
    return (
        <div>
            입장 불가😥
        </div>
    );
};

export default NotPassComponent;

 

★ PassComponent

import React from 'react';

const PassComponent = () => {
    return (
        <div>
            입장 가능😁
        </div>
    );
};

export default PassComponent;

 

★ UnLuckyComponent

import React from 'react';

const UnLuckyComponent = () => {
    return (
        <div>
            꽝!! 😗
        </div>
    );
};

export default UnLuckyComponent;