[React] 리액트 조건부 렌더링 방법

🎯 리액트 조건부 렌더링

import React from "react";
import * as FarmPictures from "./style";

export function FarmPicture({ ratio }) {
  const Render = () => {
    if (ratio >= 20) {
      return <FarmPictures.Default />;
    } else if (ratio >= 40) {
      return (
        <FarmPictures.Container>
          <FarmPictures.Default />
          <FarmPictures.Plat1 />
        </FarmPictures.Container>
      );
    } else if (ratio >= 60) {
      return (
        <FarmPictures.Container>
          <FarmPictures.Default />
          <FarmPictures.Plat1 />
          <FarmPictures.Plat2 />
        </FarmPictures.Container>
      );
    }
        ...
        ...
  };
  return Render();
}

• 이런 식으로 조건에 따라 렌더링을 달리해주는 코드를 작성하고 있었다.
• 저렇게 작성하면 마지막 조건에서는 Container안에 10개의 아이콘들이 들어가게 된다.
• 구현은 하겠지만 중복되는 코드를 줄이고 싶었다.
• 고민하다가 아이디어가 안 떠올라 팀원분에게 조언을 요청했다. 그리고 얼마 안 지나 갑자기 아이디어가 떠올라서 아래와 같은 코드로 수정했다.

 

import React from "react";
import * as FarmPictures from "./style";

export function FarmPicture({ ratio }) {
  console.log(ratio);
  const Render = () => {
    return (
      <FarmPictures.Container>
        <FarmPictures.Default />
        {ratio >= 20 && <FarmPictures.Plat1 />}
        {ratio >= 40 && <FarmPictures.Plat2 />}
        {ratio >= 60 && (
          <>
            <FarmPictures.House />
            <FarmPictures.Tree1 />
            <FarmPictures.Tree2 />
          </>
        )}
        {ratio >= 80 && (
          <>
            <FarmPictures.Tree3 />
            <FarmPictures.Tree4 />
          </>
        )}
        {ratio >= 100 && (
          <>
            <FarmPictures.Petal />
            <FarmPictures.Goose />
            <FarmPictures.Dog />
            <FarmPictures.Chicken />
            <FarmPictures.Chick1 />
            <FarmPictures.Chick2 />
            <FarmPictures.Chick3 />
            <FarmPictures.Rabbit1 />
            <FarmPictures.Rabbit2 />
          </>
        )}
      </FarmPictures.Container>
    );
  };

  return Render();
}

• 조건문 대신 &&을 사용해서 조건부 렌더링을 해줬더니 코드의 양이 확 줄어들었다.
• 혼자 고민했을 때는 아이디어가 안 떠오르다가 팀원분들에게 공유를 하고 나면 갑자기 떠오른다ㅋㅋ 고민 사항을 정리해서 전하다 보니 그 사이에 해결방법이 떠오르는 거 같다.
• 문제를 함께 고민하는 것도 협업의 재미라고 생각한다. 더 나은 방법을 찾고 견고하고 탄탄한 코드를 완성해 나가는 과정 중 하나니까!

 

📌 참고

• [React] 가독성을 높인 조건부렌더링