[React] 조건부 렌더링

1차 프로젝트를 하다가 알게된 조건부 렌더링에 대해 정리해보자. 🙋‍♀️

"데이터를 받아 왔을 때 렌더링 해주세요"

조건부 렌더링

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

&& 연산자

1차 프로젝트 wesop 상품 리스트 렌더링

 useEffect(() => {
    fetch('/data/skin.json')
      .then(res => res.json())
      .then(data => {
        if (data) {
          setSkinProducts(data);
        }
      });
  }, []);

  return (
    <div className="productsList">
      <div className="headerTitle">
        <Link to="/">
          <img
            src="/images/logo-darkgray.png"
            alt="wesopLogo"
            className="wesopLogo"
          />
        </Link>
      </div>

      <div className="categoryTitle">
        <h1 className="categoryTitleHeader"> 스킨 </h1>
      </div>

      <SubcatNav skinProducts={skinProducts} />

      <div className="productsListMain">
        <SkinProductsList skinProducts={skinProducts} />
      </div>

function SkinProductsList({ skinProducts }) {
  return (
    <div className="skinProductsList">
      {skinProducts &&
        skinProducts.map(subcat => {
          return (
            <SkinProductsListRow
              key={subcat.sub_category_id}
              id={subcat.sub_category_id}
              name={subcat.sub_category_name}
              description={subcat.sub_category_description}
              productsList={subcat.products}
            />
          );
        })}
    </div>
  );
}

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

단순히 특정 조건이 true 이면 보여주고, 그렇지 않다면 숨겨주는 경우에는 && 연산자를 사용해서 처리하는 것이 더 간편합니다.

삼항 연산자 참고

https://react.vlpt.us/basic/06-conditional-rendering.html

import React from 'react';
import test from './test';
import Wrapper from './Wrapper';


function App() {
  return (
    <Wrapper>
      <test name="react" color="red" isSpecial={true}/>
      <test color="pink" />
    </Wrapper>
  )
}

export default App;

import React from 'react';

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

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

export default test;