조건부 렌더링

App.jsx

import React from "react";
import Hello from "./components/Hello";
import Hi from "./components/Hi";
import Wrapper from "./components/Wrapper";

function App() {
    return (
        <Wrapper>
            <Hello name="react" isCondition={true} />
            <Hi text="안녕 파랑색" color="blue" />
            <Hi></Hi>
        </Wrapper>
    );
}

export default App;

Hello.jsx

import React from "react";

const Hello = (props) => {
    return (
        <>
            <div>안녕하세요 {props.name}</div>;
            {props.isCondition ? <b>True</b> : null}
        </>
    );
};

export default Hello;

isCondition 값이 true 라면 <b>True</b> 를, 그렇지 않다면 null 을 보여주도록 했다. 참고로 JSX 에서 null, false, undefined 를 렌더링하게 된다면 아무것도 나타나지 않게 된다.

props 값 설정을 생략하면 = {true}

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

예를 들자면,

App.jsx

import React from "react";
import Hello from "./components/Hello";
import Hi from "./components/Hi";
import Wrapper from "./components/Wrapper";

function App() {
    return (
        <Wrapper>
            <Hello name="react" isCondition />
            <Hi text="안녕 파랑색" color="blue" />
            <Hi></Hi>
        </Wrapper>
    );
}

export default App;