[React]興味点に応じたコード作成例

開発者として,コードを記述する際に考慮すべき最も重要な要素の一つは,「注目点の分離」に基づいてコードを記述することである.

興味のある分離は?(separation of concerns)

注目点の分離とは,我々のコード単位ごとに1つの注目点に注目し,その注目点のみを忠実に操作することである.
👉 すなわち,1つのコードには1つの情報しか含まれていない.
現在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という変数を作成し、各タイプが異なる色に戻る値をCategoryTagに入れてレンダリングしたいと思います.
しかし,ここで問題となるのはtypeがデータ情報を表し,colorがスタイル属性を表すため,異なる属性を持つデータが1つの配列に含まれることである.目的の機能を実現すること自体は問題ありませんが、1つのコードに他の2つの注目点が含まれており、可読性とメンテナンスに不利であり、Category ColorとbgColorを宣言する必要がないという欠点があります.
そこで,1つのコードに1つの情報しか含まないようにコードをどのように記述するか,注目点をどのように分けて考えるか,考えられる方法は以下の通りである.

 <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というオブジェクトを作成し、各タイプの背景色を記録します.次に、受信したパラメータタイプに応じて異なる背景色を返します.
興味のある内容に合わせてコードを書くと、イワシの読みやすさが良くなり、コードがきれいになっていることが一目でわかります-!⭐️

🍯 の最後の部分

機能の実現を停止するのではなく、1つのコードに注目点を含ませ、より可読性のあるコードを書くために絶えず考え、考えなければならない.いつももっと良い方法を探しましょう!