[REACT] 조건부 렌더링, 삼항 연산자 &&

조건부 렌더링

조건부 렌더링이란, 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미한다.

 

App.js

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="pink" />
    </Wrapper>
  )
}
 
export default App;

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;

 

여기서 삼항연산자로

isSpecial이 true이면 <b>*</b>를 화면에 보여주고

false라면 아무것도 안보여주게 된다.

 

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

 

 

 

• 첫번째 Hello컴포넌트에서는 true를 반환하니까 *이보이고
• 두번째 Hello컴포넌트에서는 아무것도 주지않으니까 아무것도 나타나지 않는다.

{ isSpecial ? <b>*</b> : null }

이 코드는

{isSpecial && <b>*</b>}

 

이렇게 바꿀 수 있다.

isSpecial이 true일때 <b>*</b>를 반환하는 것이다.

그리고 false일때는 아무것도 안한다.

 

 

또 하나!

boolean값을 넘겨줄때 변수 명만 입력하면 true를 넘겨주게 된다.