조건부 렌더링

📌조건부 렌더링

컴포넌트를 작성할 때 조건에 따라 렌더링 내용이 달라지는 경우, 분기처리하여 렌더링 하는 방식을 조건부 렌더링이라고 한다.
조건부 렌더링을 분기처리 하는 방법에는 크게 if문을 사용하는 방식과, 삼항연산자를 사용하는 방식, && 또는 ||를 사용하는 방식이 있다.
어느것이 절대적으로 옳다고 할 수 없지만, 협업을 하는데에 있어서 조건부 렌더링 방식을 통일하는 것이
서로의 코드를 이해하는데 있어서 시간을 줄여줄 것 같아서 정리하게 되었다.

기본적으로 아래와 같이 if문을 통해 분기처리하는 방법이 있다.
isLoggedIn이라는 boolean값에 따라 어떤 컴로넌트를 렌더링할지 결정하고 있다.

// react 공식문서 예제

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(

  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

위의 코드는 두 개의 선택지에 따라 컴포넌트가 결정되므로 아래와 같이 삼항연산자를 통해 표현할 수 있다.

render(){
   const [isLoggedIn , setIsLoggedIn] = useState(false);
   {isLoggedIn ? <UserGretting /> : <GuestGreeting />}
} 
  

또한 && 연산자와 || 연산자를 통해 아래와 같이 표현할 수 있다.

render(){
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   {isLoggedIn && <UserGretting />}  
   {isLoggedIn || <GuestGreeting/>}
}

위의 예제들에서 볼 수 있듯이 선택지가 2개라면 삼항연산자가 가장 깔끔한 것 같습니다.

단, 선택지가 여러개일 경우 삼항연산자가 중첩되는 현상이 생길 수 있습니다.
이것이 반복되면 코드를 이해하기 힘들어질 것 같습니다.

// 예

{ a ? b : c ? d : e }

// a가 참이면 b를 렌더링
// a가 거짓이고 c가 참이면 d를 렌더링
// a가 거짓이고 c도 거짓이면 e를 렌더링

따라서 이럴 때는 &&와 ||를 적절히 섞어 사용하여, 끊어서 표현하는 방법이 깔끔할 것 같습니다.

{a && b} //a가 참이면 b를 렌더링
{a! && c && d} //a가 거짓이고 c가 참이면 d를 렌더링
//e는 선택적으로 렌더링을 할수도있고 안할 수도있게 된다.

📌 정리

1. true, false에 따라 렌더링을 하거나, 하지않는 경우 => && 연산자와 || 연산자를 활용해 쉽게 표현.

{modal && <Modal /> // <Modal/> 이라는 하나의 컴포넌트를 렌더링 하거나, 하지않거나.

2. true, false에 따라 렌더링되는 두가지 케이스가 있는 경우 => 삼항연산자를 활용해 쉽게 표현.
   

{isLoggedIn ? <User/> : <Guest/> } // 로그인 유무에 따라 <User/>와 <Guest/> , 두개의 컴포넌트중 하나의 컴포넌트를 렌더링해야 할 경우.

3. 여러 조건에 따라 다양한 렌더링 케이스가 있는 경우 => && 연산자와 || 연산자를 활용해서 끊어서 표현. 또는, if else if ... 로 함수 빼서 활용.
   

{color==='red' && <Red />}
{color==='yellow' && <Yellow/>}
{color==='green' && <Green/>} 
.
.
. // 여러 선택지에 따라 렌더링될 컴포넌트의 후보가 여러개인 경우 ! 단, 후보가 많아지면 컴포넌트를 분리하고, props를 통해 color값을 넘겨주는식의 방법을 고려해보는게 좋을 것 같습니다.

📌 주의할점

{ }안에서 0은 false로, 1은 true로 인식이 됩니다.
예를들어, 아래와 같은 경우는 cash가 0원이라는 표현을 쓰고 싶은데 cash를 false로 인식하여 렌더링 되지 않는 경우가 발생할 수 있습니다.

const [cash,setCash= useState(0);

{cash && <p>${cash} 원이 남았습니다.</p>}     // cash가 false로 인식되어 뒤에가 렌더링 되지 않는다.

위와 같은 경우 앞의 cash는 boolean값을 의미하도록 직접 명시해주어야 원하는대로 렌더링 할 수 있습니다.

const [cash,setCash= useState(0);

{cash !==undefined && <p>${cash} 원이 남았습니다.</p>}
//또는
{!!cash && <p>${cash} 원이 남았습니다.</p>}