렌더링에 조건을 걸어서 원하는 시점에만 컴포넌트를 렌더링하게 만들 수도 있습니다. 리액트도 당연히 자바스크립트 기반 프레임워크이므로 기존 자바스크립트 조건 문법을 이용하면 됩니다.

if문을 이용한 조건부 렌더링

첫번째 방법은 if문을 이용한 조건부 렌더링입니다. 우리가 알고있는 if문 용법 그대로 조건에 따라 return하는 컴포넌트를 다르게 설정하면 됩니다.

const SayHello = props => {
    return <h1>Hello?</h1>;
};

export default SayHello;

const SayHi = props => {
    return <h1>Hi!</h1>;
};

export default SayHi;

//App.js
import React from 'react';
import './App.css';
import SayHi from './codes/conditional-rendering/SayHi';
import SayHello from './codes/conditional-rendering/SayHello';

const App = props => {
    const flag = props.flag;

    //flag가 true면 SayHi컴포넌트를
    if (flag) {
        return <SayHi />;
    }
    //false면 SayHello컴포넌트를 렌더링합니다.
    else {
        return <SayHello />;
    }
};

export default App;

App의 state인 flag를 false로 넘겨줬으니 SayHello 컴포넌트가 실행될 것이라고 예측할 수 있습니다.

//index.js
ReactDOM.render(
        <React.StrictMode>
            <App flag={false} />
        </React.StrictMode>,
        document.getElementById('root')
    );

우리가 종종 숏코딩을 위해 if문 대신 다른 연산자들을 이용하는 경우가 있는데요. JSX에서도 이런 표현이 가능합니다. JSX 구문 내에서 자바스크립트 표현식 {}을 이용하면 연산자를 통한 조건식 검사도 가능합니다. 삼항 연산자를 이용해서 조금 전의 코드를 변경해보겠습니다. 결과가 같음을 확인할 수 있습니다.

//App.js
import React, {Fragment} from 'react';
import './App.css';
import SayHi from './codes/conditional-rendering/SayHi';
import SayHello from './codes/conditional-rendering/SayHello';

const App = props => {
    const flag = props.flag;

    return (
        <Fragment>
            {flag ? <SayHi /> : <SayHello />}
        </Fragment>
    );

    /*
    //기존코드
    if (flag) {
        return <SayHi />;
    }
    else {
        return <SayHello />;
    }
     */
};

export default App;