[React] Rendering(조건별 Rendering)

 

조건별로 랜더링 하는 예시 소스

import React from 'react';

// 첫 번째 문자는 대문자
// 컴포넌트는 항상 함수를 반환해야 한다.
const Loading = () => <div>Loading...</div>

// 조건별로 랜더링
// 단일상태로 로딩 상태일 경우만 출력되는 컴포넌트
class LoadingConponent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            // 로딩이 되기 전
            loading : false
        }
    }

    render() {
        const { loading } = this.state
        return (
            <>
                {
                    /* 조건별 페이지 랜더링 */
                    loading && <Loading /> // Loading일 경우에만 출력
                }
            </>    
        )
    }
}

해당 소스는 constructor의 this.state 값 중 loading을 최초 false로 주고

그 조건에 따라 다른 문구를 보여주는 소스코드다.

화면이 로딩 중일 때(loaing : true)는 Loaing... 이 나오게 되고 아닐 때는 빈 화면이 나온다.