Conditional Rendering

조건부 렌더링이 뭐야?

조건부 렌더링이란 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미한다.
예를 들어보자.

APP.js

import React from 'react';
import Hello from './Hello';
import Wrapper from './Wrapper';

function App(){
return(
<Wrapper>
	<Hello name="React" color="blue" isSpecial={true}/>
    <Hello color="red"/>
</Wrapper>
)
}

export default App;

true는 자바스크립트이기 때문에 중괄호로 감싸준다. Hello 컴포넌트에서 isSpecial이 true 이냐 false이냐에 따라서 컴포넌트의 좌측에 * 표시를 해보자.

Hello.js

import React from 'react';

function Hello({color, name, isSpecial}){
	return(
		<div style={{color}}>
        	{isSpecial ? <b>*</b> : null}
            안녕하세요 {name}
        </div>
       );
     }
Hello.defaultProps ={
	name : '이름없음'
    }
    
export default Hello;
        

JSX에서 null, false, undefined를 렌더링하게 된다면 아무것도 나타나지 않는다.

참고 출처 : https://react.vlpt.us/basic/06-conditional-rendering.html