05.反応素子造形

00.概要

この章では、構成部品のスタイルを学習します.
スタイル範囲をコンポーネントとして指定する際に使用するテクニックなどを学び、ダイナミックスタイルの構築方法やモジュールとしての適用方法を学びます.

01.動的線スタイルの設定

この章で示したサンプルファイルの初期状態では、何も入力することなく空のエントリを追加できます.
したがって、空白の場合は追加せず、入力ウィンドウのスタイルを赤に設定します.

まず、何も入力せずに追加しないようにします.
この場合、formSubmitHandlerにif文を追加し、lengthが0の場合、何も返さない.
trimメソッドは、入力内容にスペースがあれば、削除してすべて貼り付けます.
機能的には既に実現されているが,現在の状況では,ユーザに見えるフィードバックがないため,入力状態エラーを視覚的に表示する必要がある.

まずinlineで簡単に実装し、3つの演算子を使用して現在の入力状態が有効かどうかのstateを作成し、その状態に応じて異なるスタイルを適用します.

同様に、以下の部分入力ウィンドウでも同様にスタイルを設定できます.
現在の状態では、まずスタイルが変化した後、値を正しく入力した瞬間にスタイルがリセットされないのが問題です.
また、インラインなので優先度が一番高いですが、メンテナンスの観点からはあまりよくないのでcssファイルなどを使うのが望ましいです.

まず、スタイルリセットを設定すると、入力内容が入力されていない場合は、onChangeとバンドルして入力内容を取得するHandlerに条件文を追加できます.
入力したのはHandlerのeventです.target.valueに来て、さっきのようにtrimメソッドを使用してlengthを表示し、実際の入力であるかどうかを確認します.
入力値がある場合は、isValidをtrueに設定してスタイルを変更します.

02.CSSレベルの動的設定

では、スタイルをインラインに設定した場合、classNameを使用してcssファイルを使用するように置き換えます.
フォームコントロールとvalidをclassNameとして同時に持つ部分にのみスタイルを適用するため、貼り付け、inputとlabelのそれぞれにスタイルを指定します.

次に、テンプレート文字を使用して3つの演算子を内部に追加します.
これにより、isValid stateステータスに応じてclassNameが動的に変更されます.(スペースに注意)

03.Styled Components概要

以前に作成したcssファイルの場合、このcssファイルのスタイルは特定のコンポーネントだけではありません.
他のコンポーネントでもclassNameをインポートして使用できます.
これはページ全体の外観に影響を与える可能性があります.これは悪いとは言えませんが、問題は、プロジェクトが膨大になり、多くの開発者がプロジェクトに貢献すると、重複するclassNameが現れる確率が非常に高いことです.
この場合、問題が発生する可能性があります.このような状況を避けるには2つの方法があります.

1つ目はStyled Componentsというパッケージを使用することです.
Styled Componentsは、特定のスタイルの添付ファイルを含む構成部品の構築を支援するパッケージです.

npm install --save styled-components

プロジェクトフォルダに適切なコマンドでインストールすればよい

まず、CSSファイルからスタイルコンテンツをコピーするのはこのようなものです.
ここでstyled componentsに従って記入すればいいです.

const 컴포넌트명 = styled.button`내용`

このようにテンプレートで使えばいいです.
buttonはstyledという名前のオブジェクトメソッドで、styledはstyled-componseからインポートされたオブジェクトです.
これは、2つのbackticに適用されるスタイルのボタンになります.

使用するためにさらに編集する場合は、import react from「react」は不要なので削除できます.
classNameを設定できる場所がないので、図のようにbackticにスタイルを入れるだけでButtonに直接適用できます.
仮想選択者の場合、&を使用します.
defaultとしてエクスポートできるボタンをbuttonコンポーネントに渡すすべてのツールを得ることができます.

このクラスは、作成したものではなく、styledコンポーネントによって動的に生成され、styledコンポーネントは、作成したコンテンツに基づいて対応するボタンUIを描画します.
このようなダイナミックで、変に見える名前で作成されるため、固有のclassNameと重複することはありません.したがって、前述したように、大規模なプロジェクトで同じclassNameを使用することによる問題を解決することができます.

04.スタイル化コンポーネントと動的Props

buttonに加えて、divなどの他のタグにもStyled Componentsを適用できます.
この章では、このセクションを変更します.
これまでは、各ファイルに1つの構成部品があり、通常はこの原則を守ったほうがいいが、本当にそのファイルの他の構成部品でしか使用されていない構成部品があれば、同じファイルに2つの構成部品があるのも悪くない.

これにより、CourseInputコンポーネントの内部にFormControlというコンポーネントが作成されます.
この構成部品はstyledを使用する構成部品です.

classNameが必要なので、この方法で使用できますが、propsを使用する方法は他にあります.


このようにprops送信を無効にし、FormControlのprops${}を使用して3つの演算子を使用します.

05.Styled Componentsとメディアクエリー

メディアクエリーも使用できます.
例に示すように、構成部品の作成時に@Media(条件){Apply style}を使用して作成するだけです.
これにより、ウィンドウが小さくなると、Add Goalボタンが100%になり、大きくなります.

06.CSSモジュールの使用

上記のstyledcomponentsを使用せずに、以前のようにcssファイルを作成するだけで、他の不要なコンポーネントに影響を及ぼすことを防止できます.
これはCSSモジュールと呼ばれる機能であり、基本的にCRAに含まれているため、CRA公式文書にもその機能の説明が記録されている.


cssファイルを使用するために.module.css形式に変更します.
次にclassNameにstylesを追加します.これはオブジェクトタイプです.buttonに関連する内容だけを指定したいからです.ボタンも貼ってあります

これにより、class名は自動的にこのように固有のハッシュ値を加算し、重複問題を回避します.
ご覧のように、CSSモジュール、ビルドプロセッサが内部で行う作業は、CSSクラスとCSSファイルをインポートし、クラス名を一意の名前に変換することです.これはコアタスクです.
インポートしたcssファイルの名前を一意に変更し、cssファイルでButtonコンポーネントにインポートすると、そのコンポーネントのすべてのスタイル、クラスの一意クラス、一意バージョンが作成されます.
クラス名が新しくなっただけで、適用されるスタイルは前に書いたのと同じように適用されます.
したがって、cssファイルで設定したスタイルの適用範囲はimportコンポーネントに限られます.

07.CSSモジュールを使用したダイナミックスタイル

CourseInputファイルにcssモジュールを適用する場合は、まずcssファイル名にモジュールを入れる必要があります.
ピンクケースのスタイルで記録されていますが、別の名前でも大丈夫です.
青い箱はさっきStyled Componentsを使っていた時に使っていた2つとも使えなかったので消してしまいました

これにより、classNameでstylesオブジェクトの要素を使用できます.
テンプレートライブラリを使用して動的に書き込むことができます.
基本的に、私はCSSファイルの適用、Styled Componentsの使用、またはCSSモジュールの使用を学びました.自分の好きな方法を選択すればいいのですが、この授業の講師はCSSモジュール(単独のCSSファイルの存在が好き)が好きなので、今後の授業ではCSSモジュールを使用します.