[React] Refactoring

✔︎ map,switch를 이용한 리팩토링

import React from "react";
import styled from "styled-components";

const StContainer = styled.div`
  display: flex;
`;

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor};
  margin: 20px;
`;
// 박스의 색을 배열에 담습니다.
const boxList = ["red", "green", "blue"];

// 색을 넣으면, 이름을 반환해주는 함수를 만듭니다.
const getBoxName = (color) => {
  switch (color) {
    case "red":
      return "빨간 박스";
    case "green":
      return "초록 박스";
    case "blue":
      return "파란 박스";
    default:
      return "검정 박스";
   }
};
const App = () => {
  return (
    <StContainer>
    
{/* map을 이용해서 StBox를 반복하여 화면에 그립니다. */}

      {boxList.map((box) => (
        <StBox borderColor={box}>{getBoxName(box)}</StBox>
      ))}
    </StContainer>
  );
};

export default App;

<StBox borderColor={box}>{getBoxName(box)}</StBox>

---

🔍 코드리뷰

<StBox borderColor={box}>:

StBox는 스타일링된 React 컴포넌트로, div 요소를 기반으로 합니다.
borderColor={box}는 StBox 컴포넌트에 borderColor라는 props를 전달합니다. 여기서 box는 JavaScript 변수이며, 그 값이 하나하나의 ["red", "green", "blue"];.

{getBoxName(box)}:

JavaScript 표현식으로(중괄호 사용), getBoxName(box) 함수가 호출됩니다.
box 값을 인자로 받아, 해당하는 이름(예: "빨간 박스")을 반환합니다.
이 반환된 값은 StBox 컴포넌트의 자식 요소(=컴포넌트 안에 넣는 모든 내용이 그 컴포넌트의 "자식 요소"가 됩니다.)로서 화면에 표시됩니다.

</StBox>:

StBox 컴포넌트의 닫는 태그로, 컴포넌트의 범위를 끝맺습니다.

결과:

이 코드로 인해 화면에 StBox라는 박스가 렌더링되며, 박스의 테두리 색상은 box 값에 따라 다르고, 박스 내부에는 getBoxName(box) 함수의 결과가 표시됩니다.