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

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

// App.jsx

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 컴포넌트에서는 isSpecial 이 true 이냐 false 이냐에 따라서 컴포넌트의 좌측에 * 표시를 보여주는 코드를 

작성하기 위해 가장 기본적인 방법이 '삼항연산자'사용이다 !

 

// Hello.jsx

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> 를, 그렇지 않다면 null 을 보여주도록 했다.

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

 

=>  보통 삼항연산자를 사용한 조건부 렌더링을 주로 특정 조건에 따라 보여줘야 하는 내용이 다를 때 사용

 

위의 예제는 특정조건에따라 결정이되기때문에

이런 상황에선 &&연산자사용이 더 편하다. 

 

import React from 'react';

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

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

export default Hello;

props 값 설정을 생략하면 ={true}

- 컴포넌트의 props값을 설정하게 될때는 만약 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="pink"/>
    </Wrapper>
  );
}

export default App;

isSpecial 이름만 넣어주면 isSpecial={true} 와 동일한 의미 :)