조건부 렌더링

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

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

• 삼항 연산자: 특정 조건에 따라 보여줘야 하는 내용이 다를 때 사용
• && 연산자: 특정 조건이 true 이면 보여주고 그렇지 않다면 숨겨주는 단순 처리의 경우

 

조건부를 이용하여 Hello 컴포넌트에서 isSpecial 이 true 이냐 false 이냐에 따라 컴포넌트의 좌측에 * 표시 해보자.

isSpecial 값이 true 라면 <b>*</b> 를, 그렇지 않다면 null 을 보여주도록 한다.

 

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;

여기서 true 는 자바스크립트 값이기 때문에 중괄호로 감싸준다.

 

삼항 연산자

Hello.js

function Hello({ color, name, isSpecial }) {
  return (
    <div style={{ color }}>
      { isSpecial ? <b>*</b> : null }
      안녕하세요 {name}
    </div>
  );
}

Hello.defaultProps = {
  name: '이름없음'
}

 

&& 연산자

&& 를 사용하면 첫번째로 나오는 false 값을 반환하며, 둘 다 true 라면 마지막 값을 반환한다.

function Hello({ color, name, isSpecial }) {
  return (
    <div style={{ color }}>
      {isSpecial && <b>*</b>}
      안녕하세요 {name}
    </div>
  );
}

Hello.defaultProps = {
  name: '이름없음'
}

 

props값 생략 ={true}

컴포넌트의 props 값을 설정할 때 props 이름만 작성하고 값 설정을 생략하면 true 로 설정한 것으로 간주한다.

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

이렇게 isSpecial 이름만 넣어주면 isSpecial={true} 와 동일한 의미이다.