타입별로 보여줘야할 컴포넌트가 다를 때 Tip

React에서 State에 따라 렌더링 해야할 컴포넌트를 달리해야할 때가 있다.

아래는 Type이나 State에 따라 다른 컴포넌트를 보여줘야하는 예시들이다.


function App() {
  const [type, setType] = useState("A");

  return (
    <div>
      {type === "A" && <ComponentA />}
      {type === "B" && <ComponentB />}
      {type === "C" && <ComponentC />}
    </div>
  )
}


const data = [
  {
    type: "A",
    value: 10,
  },
  {
    type: "B",
    value: 20,
  },
  {
    type: "C",
    value: 30,
  },
];

function App() {
  return (
    <div>
      {data.map(({ type, value }, key) => {
        /* if를 여러번 사용해서 Component를 return 해야할까? */
      }}
    </div>
  )
}

이런 경우엔 복잡하게 생각하지 말고 Object에 컴포넌트를 담아 사용해보자.


const ComponentMap = {
  A: <p>A</p>,
  B: <p>B</p>,
  C: <p>C</p>,
};

function App() {
  const [type, setType] = useState("A");

  return (
    <div>
      {ComponentMap[type]}
    </div>
  )
}


const ComponentMap = {
  A: ({ key, value }) => <p key={key}>A {value}</p>,
  B: ({ key, value }) => <p key={key}>B {value}</p>,
  C: ({ key, value }) => <p key={key}>C {value}</p>,
};

const data = [
  {
    type: "A",
    value: 10
  },
  {
    type: "B",
    value: 20
  },
  {
    type: "C",
    value: 30
  }
];

function App() {
  return (
    <div>
      {data.map(({ type, value }, key) => {
        return ComponentMap[type]({ key, value });
      })}
    </div>
  );
}

컴포넌트가 아니더라도 응용할 수 있다.


const StyleMap = {
  R: { backgroundColor: 'red' },
  G: { backgroundColor: 'blue' },
  B: { backgroundColor: 'green' },
};

function App() {
  const [type, setType] = useState("R");

  return (
    <div style={StyleMap[type]}>
      /* something */
    </div>
  )
}

다람쥐 헌 쳇바퀴에 타고파

타입별로 보여줘야할 컴포넌트가 다를 때 Tip