目次

アプリケーション説明

コード

実施時の注意事項

新知点

ソース

리액트 다루는 기술 10장

1.応用説明

리액트 다루는 기술 10장の中のミニプロジェクト(TODOLIST)を自分なりに少しずつ改造していきました.
このTODOLISTは、追加、削除、修正、切り替え機能を実現しています.

2.コード

3.実施時の注意事項

material UIのようにライブラリを使用すると、reactプロジェクトをより使いやすく設計したいと思います.

• 
  

  custom.js:Input、form、Buttonなどはすべて私が自分で設計したもので、直接持ってきて使うことができます.

  
  
• 
  

  layout.js:Center、Vcenter、HCenter、Flexなどはすべて私が自分で設計して使用したもので、レイアウト上の面倒を省きました.

  
  
• 
  

  theme.js:私が使用する色、塗りつぶし、エッジサイズを決定し、styled-componseのThemeProviderで使いやすくしました.

  
  
• 
  

  global.js:使用するラベルのデフォルト設定を設定しました.

  
  

残念なことに。

theme.jsのコードから,暗いモードを実現しようとしたが,時間関係で実現しなかったことがわかる.(hooksフォルダで暗いモードのcustom hookを作成します.)

4.新知

実は、このプロジェクトをするのに一番足りないのはCSSです.このプロジェクトは簡単な論理であり、動作の理解と実施はそれほど難しくないが、設計と導入、アニメーションにかかる時間と労力は長い.

1.(CSS)枠の文字値が枠の高さより大きい場合

.TodoList{
  min-height:320px;
  max-height:513px;
  overflow-y: auto;  
}

overflow-y : auto

ブロックレベル要素が上部と下部のエッジからオーバーフローした場合、内容を切り取るか、スクロールバー

を追加できます.

2. line-height

line-height行間隔

3. & + &

& + &

主に兄弟プロジェクトの間で何かを発表したいときに使われます.

ex)は主に兄弟プロジェクト間の枠線に用いられる.

&+& {
  border-top: 1px solid black;
}

説明:https://developer.mozilla.org/ko/docs/Web/CSS/Adjacent_sibling_combinator

4.複数のprops値を渡したい場合は、オブジェクト形式でグループ化して送信し、パフォーマンスを最適化する際に便利です。