やったこと
今日もfrontの課題を進めた
その前にReactの記事で興味深いものがあった
それがuseMemoのコストを心配する前に余計なdivを減らせ！である
useMemoのコストを心配する前に余計なdivを減らせ！
React では、useMemoやReact.memoなどが最適化の手段である
これらは、最適化をするためのものなので、むやみやたらに使うと逆にパフォーマンスを下げかねない
しかし、あるコンポーネントが一つ余計なuseMemoを持っているよりも、一つ余計な<div>をレンダリングする方が、
パフォーマンス（レンダリングにかかる時間）をより悪化させるという事実がある
したがって、useMemoなどを減らすことに執心する場合は、それと同等以上の熱量で余計な要素を減らすことに執心するのが良い
SVGタグ
svg 要素は、新しい座標系とビューポートを定義するコンテナ
SVG ドキュメントの最も外側の要素として使用されますが、SVG または HTML ドキュメントの中に SVG フラグメントを埋め込むためにも使用できる
svgとは
SVG は Scalable Vector Graphics の略で、二次元グラフィックスを XML で記述するための言語（テキストファイル）であり、ベクター形式の画像フォーマット
marginの複数指定
- 1つ: 四方向同じ
- 2つ: 上下、左右
- 3つ: 上、左右、下
- 4つ: 上、右、下、左
Molecules/card
なんであれで三角形ができてるの？
borderの特性を知る
.triangle{
width: 100px;
height: 100px;
border-top: 10px solid #F0897F;
}
上のCSSの場合、結果は
このようになる
そして、右にborderを追加すると
.triangle{
width: 100px;
height: 100px;
border-top: 10px solid #F0897F;
border-right: 10px solid #f6da69;
}
結果は上のようになる
ここで注目するのは、border同士の接地面が斜めになっていること
あとはどこを透明色にするか次第で三角形の向きが決まる
hackason
JSXでDate型を表示したい
結論: Date型はobjectなので表示できない
それをtoString()で変換することで表示できる
また、momentのパッケージをinstallしたところ、めちゃくちゃ簡単にDateをformat指定できた
参考
useContext
React TSでuseContext, createContextを使うときの型指定がややこしかった
useStateの関数を指定する時の型
setCount: Dispatch<SetStateAction<number>>
では
const CountContext = React.createContext()
と初期値の指定は必須ではなかったが
TypeScriptでは初期値を必ず設定してあげる必要がある
参考資料 useContextとuseStateを組み合わせ
contextを関数と値で分割したら、こんなに長くなったが果たして正しいのか？？
一つにまとめなかった理由: 何か一つのstateが変更されたらほか全てのコンポーネントが再レンダリングされてしまうから
export const ApplyUseLanguageContext = createContext<string | undefined>(undefined);
export const SetApplyUseLanguageContext = createContext(
{} as Dispatch<SetStateAction<string | undefined>>
);
export const ApplyUsernameContext = createContext<string | undefined>(undefined);
export const SetApplyUsernameContext = createContext(
{} as Dispatch<SetStateAction<string | undefined>>
);
export const ApplyKeywordContext = createContext<string | undefined>(undefined);
export const SetApplyKeywordContext = createContext(
{} as Dispatch<SetStateAction<string | undefined>>
);
export const ApplyStartDateContext = createContext<Date | undefined>(undefined);
export const SetApplyStartDateContext = createContext(
{} as Dispatch<SetStateAction<Date | undefined>>
);
export const ApplyEndDateContext = createContext<Date | undefined>(undefined);
export const SetApplyEndDateContext = createContext(
{} as Dispatch<SetStateAction<Date | undefined>>
);
export const ApplyPostProvider = (props: { children: ReactNode }) => {
const { children } = props;
const [applyUseLanguage, setApplyUseLanguage] =
useState<string | undefined>("");
const [applyUsername, setApplyUsername] = useState<string | undefined>("");
const [applyKeyword, setApplyKeyword] = useState<string | undefined>("");
const [applyStartDate, setApplyStartDate] =
useState<Date | undefined>(undefined);
const [applyEndDate, setApplyEndDate] = useState<Date | undefined>(undefined);
return (
<>
<ApplyUseLanguageContext.Provider value={applyUseLanguage} >
<SetApplyUseLanguageContext.Provider value={setApplyUseLanguage}>
<ApplyUsernameContext.Provider value={applyUsername}>
<SetApplyUsernameContext.Provider value={setApplyUsername}>
<ApplyKeywordContext.Provider value={applyKeyword}>
<SetApplyKeywordContext.Provider value={setApplyKeyword}>
<ApplyStartDateContext.Provider value={applyStartDate}>
<SetApplyStartDateContext.Provider value={setApplyStartDate}>
<ApplyEndDateContext.Provider value={applyEndDate}>
<SetApplyEndDateContext.Provider value={setApplyEndDate}>
{children}
</SetApplyEndDateContext.Provider>
</ApplyEndDateContext.Provider>
</SetApplyStartDateContext.Provider>
</ApplyStartDateContext.Provider>
</SetApplyKeywordContext.Provider>
</ApplyKeywordContext.Provider>
</SetApplyUsernameContext.Provider>
</ApplyUsernameContext.Provider>
</SetApplyUseLanguageContext.Provider>
</ApplyUseLanguageContext.Provider>
</>
);
};