[react]構成部品設計

💡Component Driven Development

:コンポーネント駆動開発(CDD、コンポーネント駆動開発)モジュール単位でコンポーネントを開発し、
構築した開発と設計方法論.これは、まず構成部品を作成し、次に結合(組み立てる)することによってページを作成する上向きの方法です.
モジュール単位でUIコンポーネントを作成するには、多くの利点があります.
CDDは、複雑なUIを持つページを単純なコンポーネントに簡略化します.ページ開発では、コンポーネントの再利用性を最大限に向上させる.
チームメンバーと不可能な作業を共有することで、作業効率が向上します.素子単位でテストすることで、
エラーは容易に認識され、解決されます.

Tool: Component Explorer

:コンポーネントブラウザ(ComponentExplorer)は、CDDをサポートするツールのUIライブラリです.
最も有名なコンポーネントブラウザにはStoryBookがあります.

🔸Storybook

:StoryBookは、独立した環境で実行される構成部品ブラウザです.使用する各構成部品を個別に表示するように構成します.
一度に1つのコンポーネントを集中的に開発することができ、アプリケーションを参照することなくUI全体を表示および理解することができます.
再利用性を向上させるため、StoryBookはコンポーネントを記録し、会社のUIライブラリとして使用することができます.だから外部に公開するためだ.
設計システムの開発の基本プラットフォームとしても使用されています.
また、構成部品を自動的に可視化し、すべての関連状態をシミュレートすることもできます.
StoryBookはテストと開発を高速化し、依存性を心配することなくアプリケーションを構築できます.

物語本の主な機能

UIコンポーネントディレクトリ化

Storiesにおける記憶素子の変化

は、熱モジュール

を再ロードするなどの開発ツールの経験を提供する.

反応器

を含む複数のビューレイヤをサポート
StoryBookガイド

💡CSS in JS

🔸構造化CSS作成方法の発展

:ユーザーが様々な環境(設備)でインターネットを使用するにつれて、開発者のCSSの作成方式も絶えず発展している.

構造化CSSを使用する理由

コラボレーションにおいてCSSのコンシステント・モード・コンポーネント

を作成する.
複雑なCSS は各種設備の表示をカバーしている

CSSの構築を試みる

:上記の理由によりCSS作業を効率的に行うためには構造化が必要であり,多様な方法が出現している.

CSSフロントプロセッサ
:CSSプリプロセッサ(CSS Preprocessor)が役立ちます.
プログラミング概念(変数,関数,継承など)を用いて解決した.CSSプリプロセッサ自体のみを使用すると、Webサーバは各プリプロセッサを認識できません.
正しいコンパイラにコンパイルされると、実際に使用されているCSSドキュメントに変換されます.これにより、CSSファイルを構造化し、小さなファイルに分割することができます.
CSSプリプロセッサの中で、最も有名な「システム外観スタイルシート」はCSSを生成するスクリプト言語です.
JavaScriptのように、$記号を使用して属性の値を変数として宣言し、必要な場所で宣言された変数を適用または再利用できます.
SassはSCSSコードを読み取り、前処理し、コンパイルしてグローバルCSSバンドルファイルを生成する.しかし、フロントプロセッサはスタイルが重なる問題を解決することができます.
これにより、追加のコンパイラが必要で、デバッグとコンパイルが困難なCSS容量が増大するという問題が発生します.

CSSメソッド
:CSSフロントプロセッサの問題を補うために、BEM、OOCS、SMACSSなどのCSS方法が現れた.
メソッド論の共通の目標は,コードの再利用,簡潔(メンテナンスが容易),拡張性,予測性(クラス名による意味予測)である.
最も代表的なCSS法はBEMである.BEMは、ブロック、要素、およびモディファイヤを使用してクラス名を作成する方法です.
クラス名をBlock__Element와--Modifierに標準化し、統一的な符号化構造を形成する.
しかし,フロントプロセッサもメソッドも言語論理上のカプセル化概念がないため,開発者は唯一のクラス名を
選択に頼るしかない.

CSS in JS
:CSSをカプセル化するため,JSではコンポーネントベースのCSSが誕生した.JSのCSSは、1つの機能を有する素子の内部に位置する.
HTML/CSS/JSはすべて存在する形式です.Styled-Component、Emotion、Styled-jsxなど.

🔸Styled-Component

:CSS i JS関連の応答ライブラリの中で最も人気のあるStyled-Componentは、構成部品に基づいてCSSを作成できるライブラリです.
既存のCSS構文を使用して、スタイル属性を追加するレスポンスコンポーネントを作成し、外部CSSファイルに関連付けるためにコンポーネントにカプセル化できます.
名前や最適化を気にする必要はありません.また,CSSファイル間の依存性を心配する必要はない.

Styled Componentフィーチャー

Automatic critical CSS
スクリーン上でレンダリングされた構成部品を追跡し、これらの構成部品のスタイルを自動的に挿入します.

No class name bugs
各タグは、一意性のあるhash値などのクラス名を生成します.

Easier deletion of CSS
すべてのスタイルプロパティは、特定の構成部品に関連付けられているため、構成部品とスタイルを一度に削除できます.

Simple dynamic styling
Reactのpropsと伝達属性に基づいて,単純に動的に素子にスタイル属性を与える.

Painless maintenance
スタイルを構成部品に継承するプロパティを見つけ、他のCSSを使用してスタイルのプロパティを定義します.その他、Styled-Component
見てやってください.

Steyld-コンポーネントの欠点

Slow interaction
JSのCSSは、状態が変化すると、JSのCSSコードを読み直してグループ化し、パフォーマンスが低下します.

しかし、開発速度を速め人的資源を減らすことができるため、CSS in JSを使用する.

Tagged template literals

Styled-Componentは、ES 6構文タグテンプレート文字を使用して構成部品にスタイルを追加します.作成する構成部品の名前と
使用するtagはstyled.tagとして定義され、back-tick(`)内部でスタイルプロパティが定義されます.
特定のタグを継承する場合は、styled(tag)のようにかっこで囲み、プロパティを再定義できます.
スタイルプロパティはpropsで渡すか、関数で渡すプロパティを使用するか、defaultプロパティを使用することもできます.

import styled from "styled-components"

const Input = styled.input`
  padding: 0.5em;
  margin: 0.5em;
  color: "black";
  background: ${(props) => (props.primary ? "papayawhip" : "yellow")};
  border: none;
  border-radius: 3px;
`;

const Input2 = styled(Input)`
  color: ${(props) => props.inputColor || "black"};
`;

export default function App() {
  return(
   <div>
     <Input defaultValue="김코딩" type="text" prmary/>
     <Input2 defaultValue="박해커" type="text" inputColor="red" />
    </div>
  )
}

Styled-コンポーネントの追加

:Styled Component定義はrenderメソッド以外で定義する必要があります.昇級文で定義されている場合は、構成部品をレンダリングするたびに
持ち運びする構成部品は毎回再定義され、レンダリング速度の低下に大きく影響します.

const ModalContainer = styled.div`
 /* ... */
`;

const Modal = () => {
  /* ... */
};

  return (
    <ModalContainer>
      /* ... */
    </ModalContainer>
   );

重ね合わせのためにaspersand(&)を使用します.すべての構成部品をStyled Componentとして定義しません.
CSSと混合して使用する場合、競合を回避するために使用できます.&を使わないと、動作は普通の子孫コレクターのようです.

const Fruit = styled.div`
 &:hover {
  background-color: red;
}

&.apple {
  color: red;
}
`
.peach & {
  color: pink;
}

.blueberry {
 color: blue; 
}
`;

function App() {
 return (
  <React.Fragment>
   <Fruit>기본 Fruit Styled-Component</Fruit>
   <Fruit className="apple">
    Fruit에 apple 클래스를 적용 (&.apple)
   </Fruit>
   <div className="peach">
    <Fruit>
     peach 클래스를 가진 엘리먼트를 부모로 가진 Fruit (.peach &)
    </Fruit>
   </div>
   <Fruit>
    <span className="blueberry">ampersand(&)를 사용하지 않음</span>
   </Fruit>
  </React.Fragment>
);
}

💡Hook:useRef

:reactでは、DOM要素に直接アクセスする方法は限られています.DOMエイリアスのアドレス値を使用する必要がある場合は、次の操作を行います.useRef Hookを使用します.

focus

text selection

media palyback

アプリケーション

アニメーション

d3.DOMベースのライブラリ

、例えばjs、greensockを使用するuseRefは、DOMノード、エイリアス、および応答要素のアドレス値を参照して、DOMエイリアスの特定の方法を利用することができる.

const 주소값_변수 = useRef(참조자료형);

return (
 <div>
    <input ref={주소값_변수} type="text" />
      {/* ref 속성에 주소값_변수를 값으로 할당하면 */}
      {/* 주소값_변수에는 input DOM 엘리먼트의 주소가 담김 */}
      {/* 이후 다른 컴포넌트에서 input DOM 엘리먼트 활용 가능 */}
 </div>
);

useRefは、currentの属性を持つオブジェクトを返し、パラメータに変換された初期値をcurrentに割り当てる.useRefは、レンダリングのたびに同じオブジェクトを提供します.currentプロパティの値はstateとは異なる値に変更されます.
構成部品を再レンダリングしても、その値は維持されます.これらの特性を有する変更可能な値を処理すると、
使用可能です.

フォーカスの例

import React, { useRef } from "react";

const Focus = () => {
 const firstRef = useRef(null);
 const secondRef = useRef(null);
  
 const handleInput = (event) => {
  console.log(event.target); // <input></input>
   if(event.key === "Enter") {
     secondRef.current.focus();
     event.target.value = "";
   } else if (event.target === secondRef.current) {
     firstRef.current.focus();
     event.target.value = "";
   } else {
     return;
   }
  }
};

return (
 <div>
  <div>
   <label>hello</label>
   <input ref={firstRef} onKeyUp{handleInput} />
  </div>
  <div>
    <label>world</label>
    <input ref={secondRef} onKeyUp{handleInput} />
  </div>
 </div>
 );
};

export default Focus;