[React] Study #5 | 조건부 렌더링

💡조건부 렌더링?

• 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미

---

Ex) App 컴포넌트에서 Hello 컴포넌트를 사용할 때, isSpecial 이라는 props를 설정

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

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

export default App;

• true는 자바스크립트 값이기 때문에 중괄호로 감싸기

EX) 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;

출력화면

&& 연산자 

Hello.js

import React from 'react';

function Hello({color, name, isSpecial}) {
    return (
        <div style={{color}}>
            { isSpecial && <b>*</b> }
            제가 한번 해보겠습니다, {name}!
        </div>
    )
}

Hello.defaultProps = {
    name : '이거슨 기본이름'
}

export default Hello;

• isSpecial이 false일땐, false이고, isSpecial이 true 일때, <b>*</b>이 된다.

 

 

 

❗️props 값 설정을 생략하면 ={true} 로 간주

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

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

export default App;

isSpecial={true}와 동일하다

 

 

---

Reference

https://react.vlpt.us/