[React] JSX basic codes

삼항연산자 

//삼항연산자로 if문같이 사용. if문은 넣을 수 없음


import React from 'react';

function App() {

	const name = "리엑트";
    return (
        <div>
            name : {name}

                {name === '리엑트' ? (

                    <h1>리엑트입니다</h1>
                ) : (
                    <h2>리엑트가 아닙니다.</h2>
                )}
         </div>
    );
}


export default App;

 

AND사용

import React from 'react';

function App() {
    const name = "react";
    //not bad 
    // return (
    //     <div>
    //         {name === 'react' ? (<h1>Yes</h1>) : (null)};
    //     </div>
    // )

    //good
    //return 값이 false 일 경우, HTML에서 null 값으로 인식하는 것을 이용,
    //but return 값이 false가 아니라 0이면 0그대로 출력한다.
    return (
        <div>
            {name === 'react' && (<h1>Yes</h1>)};
        </div>
    )
}

OR사용

 

//undefined가 return 되면 웹브라우저에선 에러
// JSX내부에서 랜더링하는 단계에선 괜찮음 return 만 안하면 

import React from 'react';

function App() {
    const name = undefined;
    return (name || 'value is undefined');
    //웹 브라우저로 바로 return 하는 행위. undefined일때 에러
    //return name;

    //JSX 내부에서 return하는 행위
    //return <div>{name}</div>
}

export default App;

인라인 스타일링

import React from 'react';

function App() {
    const name = "React";
    const style = {
        //background-color 같이 문자(-) 포함되면 빼고 camelCase로 작성
        backgroundColor: 'black',
        color: 'aqua',
        fontSize: '48px',
        fontWeight: 'bold',
        padding: 16 //단위 생략시 px단위
    }

    return <div style={style}>{name}</div>;
}

export default App;

className (not class)

import React from 'react';
import './App.css'

// in css file
// .react {
//     background-color: aqua;
//     color: black;
//     font-size: 48px;
//     font-weight: bold;
//     padding: 16px;
//   }
function App() {
    const name = "React";
    return <div className= "react">{name}</div>;
}

export default App;