[React] 조건부 렌더링

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

---

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

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

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

export default SayHello;

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

export default SayHi;

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 컴포넌트가 실행될 것이라고 예측할 수 있습니다.

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

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

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;

---

참조

https://ko.reactjs.org/docs/conditional-rendering.html

조건부 렌더링 – React