[React] Rendering(조건별 Rendering)


[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로 주고 그 조건에 따라 다른 ...


#javascript #react #reactjs #rendering #랜더링 #리액트 #조건 #조건별

원문링크 : [React] Rendering(조건별 Rendering)