✍️ TILog_01

目次

ストーリーブックの使い方

構造化CSS作成方法の発展と原因

タイプのコンポーネントライブラリ

の使用方法

反応器の使用方法

コンポーネント駆動開発方法

例えば、ある企画者からAページの企画を受けた上で、デザイナーと開発者が協力してAページを作成しました.その後、企画者はデザイナーや開発者にBページの企画を伝えた.Bページプランを見ると、Aページには同じ機能を持つ「ボタン」が要求されています.では、デザイナーや開発者はBページに入る「ボタン」を再作成する必要がありますか?
ボタンUIコンポーネントを作成すると、AページだけでなくBページでも使用できます.すなわち、再利用可能なUIコンポーネントを作成することができる.この問題を解決するために出現したのが,コンポーネント駆動開発(CDD)方法論である.
実際、CDDメソッドを使用してUIを構築するサイト:BBC

Storybook

コンポーネントブラウザ(ComponentExplorer)は、多くのUI開発ツールの1つです.再利用性を向上させるために、構成部品をドキュメント化し、シミュレーション可能なさまざまなテストステータスを自動的に表示できます.これは、エラーを事前に防止するのに役立ちます.テストと開発を高速化する利点があり、依存性を心配することなくアプリケーションを構築できます.
StoryBookインストール-正式ドキュメント

構造化CSS作成方法の発展と原因

現在ではパソコンだけでなく、モバイルやタブレットで様々な環境(設備)でインターネットを利用しています.これは、様々なデバイスに適用するためにCSSが複雑になることを意味する.そこで,生産性を向上させるためには,構造化CSSの必要性と,どのように構造化するかを検討する必要がある.これらの問題を解決するために、CSSフロントプロセッサの概念が現れた.しかし、スタイルが重なる問題を解決するために、フロントプロセッサは内部で何をしているのか分からず、階層を作成するだけで容量が非常に大きくなります.この問題を補うために,BEM,OOCS,SMACSSなどのCSSメソッド論が出現し,以下のような指向点がある.

コード

を繰り返し使用

コードの簡潔性(保守可能)

コードの拡張性

コードの予測性(クラス名で予測)

しかし、これらの方法論にも問題があった.クラス名セレクタは冗長になり、これらの長いクラス名は寸法を不要にし、再利用するたびにすべてのUIコンポーネントを明示的に拡張する必要があります.また,パッケージの概念がないため,開発者は一意のクラス名の選択に頼るしかない.
結局、CS-In-JSが誕生し、この問題を正しく解決した.代表的なStyled-Component.Styled-Componentは、UIを機能またはステータスのコンポーネントから完全に分離して使用できる非常に簡単なモードを提供します.

Styled-Component

Styled ComponentはReactのコンポーネントベースの開発環境で造形用CSSの性能を向上させるために誕生した.Styled Componentを使用すると、既存のCSS構文を使用してスタイル属性を追加したReactコンポーネントを作成することもできます.

const Button = styled.a`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
`;

上のコードを説明します.
Buttonとは、変数を宣言し、タグ属性を定義することです.上のコードはaラベルを定義しています.次にbacktic(`)で既存のCSS構文を使用してスタイル属性を定義します.
Styled Componentの特徴は次のとおりです.

Automatic Critical CSS:Styled Component画面でレンダリングされた構成部品を追跡することで、対応する構成部品にスタイルを自動的に挿入します.

No class name bugs:Styled Component独自のclassNameを生成します.

CSSのEasierを削除:すべてのスタイル属性が特定の構成部品に関連付けられているため、構成部品が使用されなくなって削除されると、そのスタイル属性も同時に削除されます.

単純ダイナミックスタイル:classNameを手動で管理する必要はありませんが、Reactのpropsまたはグローバル属性に基づいてコンポーネントにスタイル属性を付与するため、簡単で直感的です.

Painlessメンテナンス:他のCSSファイルを検索することなく、継承スタイルから構成部品への属性を検索するため、コードが大きくなってもメンテナンスは難しくありません.

自動仕入先プレフィックス:各コンポーネントは、既存のCSSを使用してスタイル属性を定義できます.その他はStyled Componentが処理します.

styled-conentインストール方法

!! 터미널에 아래 명령어 둘 중 하나를 입력한다 !!
# with npm
$ npm install --save styled-components

# with yarn 
$ yarn add styled-components


!! Styled Component 에서는 package.json에 다음 코드를 추가하도록 권장하고 있습니다. 아래의 코드를 추가하면 여러 버전의 Styled Component가 설치되어 발생하는 문제를 줄여줍니다. !!
{
  "resolutions": {
    "styled-components": "^5"
  }
}

反応器のuseref hookの使い方

ReactのHook APIに含まれるuserefの説明の正式なドキュメント

const refContainer = useRef(initialValue); // useState처럼 따로 선언해준다
// const 주소값을_담는_그릇 = useRef(참조자료형)

...생략...

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      // React에서 사용 가능한 ref라는 속성에 주소값을_담는_그릇을 값으로 할당하면
      // 주소값을_담는_그릇 변수에는 input DOM 엘리먼트의 주소가 담깁니다.
      // 향후 다른 컴포넌트에서 input DOM 엘리먼트를 활용할 수 있습니다.
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

上のコードはReaction公式ファイルのuseref説明部分から引かれたコードです.

import React, { useRef } from "react";

const Focus = () => { // Focus 컴포넌트 정의
  const firstRef = useRef(null);
  const secondRef = useRef(null);
  const thirdRef = useRef(null);

  const handleInput = (event) => { // handleInpu 이벤트 정의
    console.log(event.key, event);
    if (event.key === "Enter") { // 엔터 키를 입력했으면
      if (event.target === firstRef.current) { // firstFef의 현재와 입력된 타겟이 같으면
        secondRef.current.focus(); // secondRef로 집중!
        event.target.value = ""; // 입력된 타켓은 빈 문자열로 초기화
      } else if (event.target === secondRef.current) {
        thirdRef.current.focus();
        event.target.value = "";
      } else if (event.target === thirdRef.current) {
        firstRef.current.focus();
        event.target.value = "";
      } else {
        return;
      }
    }
  };

  return (
    <div>
      <h1>타자연습</h1>
      <h3>각 단어를 바르게 입력하고 엔터를 누르세요.</h3>
      <div>
        <label>hello </label>
        <input ref={firstRef} onKeyUp={handleInput} />
      </div>
      <div>
        <label>world </label>
        <input ref={secondRef} onKeyUp={handleInput} />
      </div>
      <div>
        <label>codestates </label>
        <input ref={thirdRef} onKeyUp={handleInput} />
      </div>
    </div>
  );
};

export default Focus;

以上のコード
hello文字列の隣のinputに何かを作成しenterキーを押すと、world文字列の隣のinputにフォーカスし、hello文字列の隣のinputの文字列は消えます.
world文字列の横にあるinputでコンテンツを作成しEnterキーを押すと、codestates文字列の横にあるinputが焦点となり、world文字列の横にあるinputの文字列が消えます.
codestates文字列の横のinputも上記のように実行されます.