[React] 관심사의 분리에 따라 코드 짜기 예시 (Separation of Concerns)

개발자로서 코드를 짤 때 고려해야할 가장 중요한 요소 중 하나는 바로 '관심사의 분리'에 따라 코드를 짜는 것이다.

관심사의 분리란? (separation of concerns)

관심사의 분리란 우리의 코드가 단위 별로 하나의 관심사만 갖도록 하고 그 관심사에 대해서만 충실히 동작하도록 만들어야 한다는 뜻이다.
👉 즉 한 코드 내에 한 가지의 정보만 들어가도록 하는 것

현재 2차 프로젝트를 한창 진행 중인데, 멘토님으로부터 관심사의 분리에 따라 코드를 짤 필요가 있다는 피드백을 받았다.

그에 대한 코드는 아래와 같다.

 const Category_Color = [{ type: 'VOD', color: `${theme.purple}` },
    { type: '오프라인', color: `${theme.red}` },
    { type: '전자책', color: `${theme.green}` },
  ];

  const bgColor = Category_Color.find(list => list.type === categoryTag).color;
  
  
return
//관련없는 코드 생략 
<CategoryTag bgColor={bgColor}>{types}</CategoryTag>
   
// Styled Component 부분 
const CategoryTag = styled.span`
background-color: ${props => props.bgColor}`

위는 상품 하나에 대한 컴포넌트이다.

상품 하나하나 각각 다른 타입을 갖고 있는데, 타입별로 다른 태그 색깔을 주고 싶었다. 그래서 생각했던 방식이 타입별로 원하는 색깔을 담은 배열을 만들어주고, bgColor라는 변수를 만들어서 각각의 type별로 다른 색깔을 return하는 값을 CategoryTag에 넣어주어 렌더링하려고 하고자 했다.

그런데 여기서 문제가 생기는 점이 type은 data 정보를 나타내고 color은 스타일 속성이라 서로 다른 속성을 갖고 있는 data가 한 배열 내에 담긴다 . 원하는 대로 기능을 구현하는 것 자체에는 문제가 없겠지만, 한 코드 내에 다른 두 관심사가 포함되어있어 가독성이나 유지보수에 좋지 않다는 점, 불필요하게 Category_Color, bgColor를 선언해줘야한다는 단점이 있었다.

 <CategoryTag type={types}>{types}</CategoryTag>

//Style Component part
const CategoryTag = styled.span`
  background-color: ${({ type, theme }) => {
    const colorForType = {
      VOD: theme.purple,
      오프라인: theme.red,
      전자책: theme.green,
    };
    return colorForType[type];
  }};
`;

보이는가! 매우 간단해진다. 따로 Category_Color를 선언해줄 필요도, bgColor을 만들어줄 필요도 없다. CategoryTag내에 해당 아이템의 type을 prop으로 넘겨준뒤, Styled Component 내에서 처리를 해준다.

Styled Component 내에서 colorForType이라는 객체를 만들어주고, 그 안에 각각의 type에 따른 배경색을 적어준다. 그리고 인자로 받은 type에 따라 다른 배경색을 return해준다.

관심사에 따른 코드를 적음으로써 훠어어얼씬 가독성이 좋아지고 코드가 깔끔해짐을 한눈에 볼 수 있다-! ⭐️

🍯 마무리

기능 구현을 하는 것에서 멈추지 말고 한 코드에 하나의 관심사가 담길 수 있게끔, 더 가독성 좋은 코드를 짜기위해 계속 생각하고 고민하자! 더 좋은 방식을 늘 찾아가자!