「基礎から学ぶ React/React Hooks」の感想・備忘録2

const buttonRef = useRef(null)
const inputRef = useRef(null)
return (
  <>
    <button ref={buttonRef} onClick={()=>console.log(buttonRef.current.innerText)}>hoge</button>
    <input type="text" ref={inputRef} onChange={()=>console.log(inputRef.current.value)}/>
  </>
)

2. 状態管理

const count = useRef(0)
console.log(count.current)

useRefを使って生成できるref オブジェクトのcurrent プロパティに設定した値は、 useStateのようにコンポーネントが再マウントされても保持される。
useStateと違って、 useRefのcurrent プロパティは値が更新されても再レンダリングが起きない。

その他

ULID

ユニークとなるランダムな値を生成するためのライブラリ。
有名なライブラリにUUIDもあるが、ULIDは生成した順にソートすることができる。
npm install ulidでインストール。

import { ulid } from 'ulid'
console.log(ulid())

Chakra UI

Reactコンポーネントライブラリ。

インストール

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

導入

import { ChakraProvider } from '@chakra-ui/react'
import Hoge from './Hoge'

const App = () => {
  return (
    <ChakraProvider>
      <Hoge />
    </ChakraProvider>
  )
}
export default App

import { Box } from "@chakra-ui/react"

export default Hoge = () => {
  <Box px={10} my={10} backgroundColor="red">Hello</Box>
}