TIL-211129
6715 ワード
Component Design
コンポーネント別に開発
JavaScriptメソッドのCSS
構造的にCSSを記述する方法の発展と原因を理解する.
Styled-Componentライブラリを使用すると、コンポーネントベースのCSSを作成できます.
UseRef Hookを利用してDOM Referenceを利用することができます.
構造化CSS作成方法の発展
-インターネットが誕生して以来、技術の発展に伴い、様々な環境(設備)が使用され始め、CSSの作成方式も発展しています.
-プロジェクトの規模と複雑さが増加し、チーム数も増加
-より効率的なCSSの構築が必要
-CSSを構成部品領域に導入して構成部品ベースの方式を実現し、パッケージの重要性
- Styled-Component
-UIを機能またはステータスコンポーネントから完全に分離して使用できる簡単なモードを提供します.
Styled-Component
CSSからJS応答ライブラリへ
Reactのコンポーネントベースの開発環境でCSSモデリングを行うための最もポピュラーなライブラリ
Automatic critical CSS
Styled Componentは、画面でレンダリングされた構成部品を追跡し、これらの構成部品にスタイルを自動的に挿入します.したがって、コードを適切に割り当てることで、ユーザーがアプリケーションを使用するときに、画面に最小限のコードしか表示されないことを保証できます.
No class name bugs
Styled Componentは独自のclassNameを作成します.これにより、classNameの重複またはエラーによるエラーを低減できます.
Easier deletion of CSS
CSSファイルでclassNameを検索して、無効または削除された構成部品に対応するスタイルプロパティを削除する必要があります.ただし、Styled Componentのすべてのスタイル属性は特定の構成部品に関連付けられているため、構成部品を使用せずに削除すると、スタイル属性も削除されます.
Simple dynamic styling
これは、classNameを手動で管理する必要がなく、Reactのpropsまたはグローバル属性に基づいて構成部品にスタイル属性を付与する単純で直感的です.
Painless maintenance
他のCSSファイルを検索するために継承スタイルから構成部品への属性を検索する必要がないため、コードが大きくなっても維持は難しくありません.
Automatic vendor prefixing
各構成部品に既存のCSSを使用するスタイル属性を定義するだけでいいです.その他はStyled Componentで処理します.
useRef
const 주소값을_담는_그릇 = useRef(참조자료형)
// 이제 주소값을_담는_그릇 변수에 어떤 주소값이든 담을 수 있습니다.
return (
<div>
<input ref={주소값을_담는_그릇} type="text" />
{/* React에서 사용 가능한 ref라는 속성에 주소값을_담는_그릇을 값으로 할당하면*/}
{/* 주소값을_담는_그릇 변수에는 input DOM 엘리먼트의 주소가 담깁니다. */}
{/* 향후 다른 컴포넌트에서 input DOM 엘리먼트를 활용할 수 있습니다. */}
</div>
);
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}Reference
この問題について(TIL-211129), 我々は、より多くの情報をここで見つけました https://velog.io/@ebiny/TIL-211129テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol