React에서 조건부 렌더링을 사용하는 5가지 방법

React로 개발을 하다 보면 조건부 랜더링을 사용하는 경우가 무척 많이 있습니다.

물론 그 복잡도가 낮을 경우라면 간단하게 삼항 연산자로 처리하면 되지만 복잡해지는 경우도 많기 때문에 이 글에서는 조건부 랜더링을 처리하는 다양한 방법에 대해 소개해 보겠습니다.

1. && 사용하기

조건의 값이 0, false, undefiend가 아닌 경우 render 해 주며, 가장 짧고 간결하게 사용할 수 있습니다.

const Test: React.FC<IProps> = ({ anyProp }) => {
  ...
  return (
    <>
      ...
      {anyProp && <p>This is Show!!</p>}
      ...
    </>
}

 

2. Ternary operator

True or False 형식에서 많이 사용하며 아마 React를 사용할 때 가장 많이 사용하는 방법입니다.

const Test: React.FC<IProps> = ({ isLogin }) => {
  ...
  return (
    <>
      ...
      {isLogin ? <button>Logout</button> : <button>Login</button>}
      ...
    </>
}

3. If... else

코드가 조금이라도 짧아지는 것을 선호하는 편이라 개인적으로는 잘 사용하지 않지만 가장 직관적이라고 생각합니다.

const Index: React.FC<IProps> = ({ isLogin }) => {
  ...
  if(isLogin)
    return <Home />
  else
    return <Login />
  ...
}

 

4. Multiple Ternary operator

코드를 지저분하게 만드는 주범으로 하나쯤이야를 반복하다 보면 코드의 가독성이 저세상으로 가는 것을 실시간으로 체험할 수 있어 클린 코드를 지향한다면 개인적으로 사용하는 것을 절대 지양해야 한다고 생각합니다.

 

아래의 예제는 극단적으로 든 것도 있지만 최대한 깔끔하게 보이도록 노력한 점도 있습니다.

실제로 큰 페이지 중간에 2단, 3단 정도로 들어가게 되면 만들면서도 헷갈리는 경험을 할 수 있습니다.

interface IProps {
  userType: 'customer' | 'seller' | 'admin' | 'guest';
}

const Index: React.FC<{userType:}> = ({ userType }) => {
  ...
  return (
    userType === 'customer' ? <Customer /> :
    userType === 'seller' ? <Seller /> :
    userType === 'admin' ? <Admin /> : <Guest />
  );
  ...
}

5. Object

이번 글을 쓰기로 결심한 방법으로 개인적으로 가장 깔끔하게 사용할 수 있는 방법이라고 생각합니다.

물론 가장 좋은 것은 이렇게 여러 역할을 하도록 코드를 안 짜는 게 최선이지만... 시간에 쫓기고 기획의 변경 등으로 인해 자주 사용하게 되는 것 같습니다.

interface IProps {
  userType: 'customer' | 'seller' | 'admin' | 'guest';
}

const userTypeComponent = {
  customer: <Customer />,
  seller: <Seller />,
  admin: <Admin />,
  guest: <Guest />
}

const Index: React.FC<{userType:}> = ({ userType }) => {
  ...
  return userTypeComponent[userType];
  ...
}

이렇게 5가지 방법이 있으며 1, 2, 5번을 자주 사용하고 있습니다.

만약 더 좋은 방법이 있다면 댓글 남겨주시면 감사하겠습니다 :)