11.24.2024(일) Today I Learned

 영어 공식 문서를 꼼꼼하게 읽는 연습을 했습니다. 

 

1. [ jotai ] 공식 문서 살펴보기 

1-1. 파생원자 

공식문서를 읽으며 새롭게 알게 된 점은 파생원자(Derived atoms) 라는 개념입니다. 자신의값을 반환하기 위해 다른 원자로부터 읽어 올 수 있다는 데요.  예를 들어 전체 뉴스 목록이라는 상태를 관리해야 하고,  사용자가 보고 있는 뉴스 인덱스에 대한 뉴스 상태를 저장해야할 때 유용해보입니다. 

const progressAtom = atom((get) => {
  const anime = get(animeAtom)
  return anime.filter((item) => item.watched).length / anime.length
})

import { atom, useAtom } from 'jotai'

// Create your atoms and derivatives
const textAtom = atom('hello')
const uppercaseAtom = atom(
  (get) => get(textAtom).toUpperCase()
)

// Use them anywhere in your app
const Input = () => {
  const [text, setText] = useAtom(textAtom)
  const handleChange = (e) => setText(e.target.value)
  return (
    <input value={text} onChange={handleChange} />
  )
}

const Uppercase = () => {
  const [uppercase] = useAtom(uppercaseAtom)
  return (
    <div>Uppercase: {uppercase}</div>
  )
}

// Now you have the components
const App = () => {
  return (
    <>
      <Input />
      <Uppercase />
    </>
  )
}

1-2. 로컬 스토리지 상태관리  atomwithStorage

또 jotai  패키지에는 jotai/utils 번들도 포함되어 있는 데  해당 함수로 로컬 스토리지에 아톰을 유지하고 서버 측 렌더링 중 아톰을 수화하여 Redux 와 유사한 리듀서 및 액션 유형으로 아톰을 생성하는 등의 기능을 추가한다고 하네요. 

기존 아톰은 사용자가 새로 고침나 웹사이트를 재방문 했을때 초기값으로 초기화되는 데요. 예를 들어 로그인유지시(사용자가 로그인한 상태에서 해당 페이지를 새로고침시에도 로그인상태가 유지되어야함), 다크 모드나 언어 설정과 같은 사용자 설정들을 저장해야할 때  유용할 거라 예상됩니다.  

 그런데 "서버 측 렌더링 중 아톰을 수화하여 Redux 와 유사한 리듀서 및 액션 유형으로 아톰을 생성하는 등의 기능을 추가한다"이부분은 이해가 가질 않았어요. 서버 측 렌더링 중 아톰을 수화할 때가 정확히 언제지라는 생각이 들어서 SSR 방식과 CSR 방식 내용을 다시 찾아보고 정확하게 이해했는 지 살펴봐야겠어요.

import { useAtom } from 'jotai'
import { atomWithStorage } from 'jotai/utils'

// Set the string key and the initial value
const darkModeAtom = atomWithStorage('darkMode', false)

const Page = () => {
  // Consume persisted state like any other atom
  const [darkMode, setDarkMode] = useAtom(darkModeAtom)
  const toggleDarkMode = () => setDarkMode(!darkMode)
  return (
    <>
      <h1>Welcome to {darkMode ? 'dark' : 'light'} mode!</h1>
      <button onClick={toggleDarkMode}>toggle theme</button>
    </>
  )
}

 

1-3. 불변성 유지 atomWithImmer 

확장 기능에 대한 별도의 패키지도 있다는 데 useAtom 과 차이를 모르겠어요. 찾아보니 react 불변성 개념과 관련이 된거 같고 배열, 객체와같은 복잡한 상태를 관리할때 불편성을 지킬 수 있도록 제공하는 기능 같네요. 정확히 이해는 아직? 이니 나중에 더 공부해야겠어요.

import { atomWithImmer } from 'jotai-immer'

import { useAtom } from 'jotai'
import { atomWithImmer } from 'jotai-immer'

// Create a new atom with an immer-based write function
const countAtom = atomWithImmer(0)

const Counter = () => {
  const [count] = useAtom(countAtom)
  return (
    <div>count: {count}</div>
  )
}

const Controls = () => {
  // setCount === update: (draft: Draft<Value>) => void
  const [, setCount] = useAtom(countAtom)
  const increment = () => setCount((c) => (c = c + 1))
  return (
    <button onClick={increment}>+1</button>
  )
}

불변성 Immer 와 관련된 블로그 

https://velog.io/@a9120a/react-immer-%EB%A1%9C-%EC%89%BD%EA%B2%8C-%EB%B6%88%EB%B3%80%EC%84%B1-%EC%9C%A0%EC%A7%80%ED%95%98%EA%B8%B0

[react] 'immer' 로 쉽게 불변성 유지하기💫

 

 

Next.js 등의 프레임워크로 서버측 렌더링을 하는 경우. 루트에 jotai Provider 컴포넌트를 추가해야한다고 하네요. 저는 리액트에서도  루트에 provider 컴포넌트를 추가해야한다고 생각했는 데  다시 살펴봐야겠습니다. 

 

또한 아톰 값을 읽기만 하거나 쓰기만 할경우 별도의 useAtomValue , useSetAtom 훅을 제공합니다. 

 

2. next.js  2번 렌더링 이유

브라우저에서 접속 요청을 받았을때 사전렌더링을 통해 서버측에서 한 번 렌더링하고, 브라우저에서 자바스크립트 번들형태로 전달되어서 브라우저에서 실행될때 즉 하이드레이션이 일어날때 한 번 렌더링이 발생한다.