조건부 렌더링(Conditional Rendering)

리액트에서 코드를 작성할때 변수의 상태에 따라 요소를 어떻게 표시할지 작성하는 로직을 많이 짜게된다 

 

이때 리액트에서 자주 사용되는 조건부 렌더링의 3가지 패턴을 알아보자

 

1. && 연산자 

import { useState } from "react";

const arr = [{color: "red",},{color: "blue",},{color: "green",},{color: "red",},
  { color: "blue",},{ color: "red",},{ color: "green",},
];

function App() {
  return (
    <div>
      <div>
        {arr.map(
          (el) =>
            el.color === "green" && (
              <div
                style={{
                  background: el.color,
                  width: "100px",
                  height: "100px",
                  border: "2px solid black",
                }}
              >
                test
              </div>
            )
        )}
      </div>
    </div>
  );
}

export default App;

 

위의 코드를 간단하게 설명하자면 arr 배열을 map 메서드를 통해 배열의 각 요소(객체)의 color 프로퍼티를 받아 해당 color의 색상을 가진 div 요소를 생성하는 코드이다

 

map 메서드의 콜백함수에 주목해보자

el.color === "green" && (
              <div
                style={{
                  background: el.color,
                  width: "100px",
                  height: "100px",
                  border: "2px solid black",
                }}
              >

 

위와 같이 && 연산자를 사용하면  el.color의 값이 green인 경우에만 div요소를 표시할수 있다

 

코드를 작성할때 특정상황에서만 한정해서 요소를 표시하고 싶을때 사용하면 유용하다

 

&& 연산자 이용한 조건부 렌더링

 

2. 삼항 연산자 (ternaries operator)

 

자바스크립트의 문법을 안다면 삼항연산자를 알고 있을것이다 리액트에서도 똑같이 써주면 된다

 

   <div>
        {arr.map((el) =>
          el.color === "green" ? (
            <div
              style={{
                background: el.color,
                width: "100px",
                height: "100px",
                border: "2px solid black",
              }}
            >
              test
            </div>
          ) : (
            <p>Not green</p>
          )
        )}
      </div>

 

위와 같이 bollean 조건 뒤에 물음표를 붙이고 true일 경우에 리턴할 요소를 먼저 써준뒤 콜론을 붙여주고 그 뒤에 false일 경우에 리턴할 요소를 써준다 위의 코드는 삼항 연산자에 의해 el.color가 'green'이면 해당 색상을 가진 div요소를 리턴하고 그렇지 않을 경우에는 'Not green' 문구를 리턴한다

 

두개의 조건에 따라 다르게 요소를 표시하고싶을때 if else문을 사용하는 대신 삼항연산자를 사용하면 간단하게 조건에 따라 다른 렌더링이 가능하다

 

삼항 연산자를 이용한 조건부 렌더링

 

3. 다중 반환(multiple return)

 

function App() {
  const data = [];
  if (data.length === 0) return <div>데이터가 없습니다</div>;
  return (
    <div>
      {data.map((el) => (
        <div>{el}</div>
      ))}
    </div>
  );
}

export default App;

 

이 방법은 초기 렌더링시 요소가 표시되는 방법을 다르게 하고싶으면 좋은 방법이다 if 문을 통해 return할 요소를 지정해주는 방법이다 물론 조건이 많다면 if 문을 여러번써도 괜찮다

 

위의 코드를 사용하면 data의 길이가 0이므로 데이터가 없습니다라는 문구가 리턴된다