Nextjs学びメモ

ピン留めされたアイテム

Nextjsで学んだことをどんどん書いていく(思いついた順で書くため、系統だてて書くことができない)

use state

状態変化
動的に値が変化する場合に使う
ex. Twitterのいいね数

呼び出し側

import {ComponentName} from './about'
<ComponentName />

呼び出され側

about.jsx

export function ComponentName{
  return(
      <div>hoge</div>
  );
}

pagesディレクトリとpublicディレクトリは変更不可

pagesディレクトリ
ファイル名がルーティングとして使われる
export defaultでないといけない(Named export使えない)
JSX記法はタグは一つのみ(子のタグは複数可能)

index.jsx

export default Home(){
  return(
     <div>
       <p>Hello</p>
     </div>
  );
}

ライフサイクルでマウント時、アンマウント時にそれぞれ背景を変えるなど
何かしらのことをしたいときに使用する。

import {useEffect} from "react"

useEffect( ()=>{
  //マウント時の処理

  return () => {
  // アンマウント時の処理
   };

}, [] );

ex

const [hoge,setHoge] = useState([])

const [hoge,setHoge] = useState<string []>()