리액트에서 조건에 따라 결과를 다르게 보여줄 수 있는데 이를 조건부 렌더링이라 한다.
먼저 props 로 true 값을 보내준다.
//App.js
import React, { Component } from "react";
import Hello from "./Hello";
import Wrapper from "./Wrapper";
function App() {
return (
<Wrapper>
<Hello name="sun" color="red" isSpecial={true}></Hello>
<Hello color="blue"></Hello>
</Wrapper>
);
}
export default App;
이후 Hello.js 에서 삼항연산자를 이용해 isSpecial 이 값에따라 ‘*’ 을 출력해 주도록 한다.
이때 isSpecial 의 값을 지정해 주지 않았을 때는 true 값을 보내게 된다.
<Hello name="sun" color="red" isSpecial></Hello> (isSpecial === true)
//Hello.js
import React from "react";
function Hello({ color, name, isSpecial }) {
return (
<div style=>
{isSpecial ? <b>*</b> : null}안녕하세요 {name}
</div>
);
}
export default Hello;
위의 삼항연사자는 false 인경우 다른 결과가 아닌 null 을 리턴하기 때문에 {isSpecial && <b>*</b>} 이런 식으로 &&연산자를 통해 조금 더 간결하게 사용할 수 있다.
결과
*안녕하세요 sun
안녕하세요
이때 null, false, undefinde 등을 렌더링 하는 경우 아무것도 나타나지 않지만 0 을 렌더링 하는 경우 숫자 0이 그대로 찍히게 되므로 주의해야 한다.