Frontends

리액트 19버전 정리

주요 새로운 기능

Actions

비동기 함수 지원 강화: useTransition을 사용하여 비동기 함수에서 자동으로 pending 상태, 오류 처리, 낙관적 업데이트를 관리할 수 있습니다.

const [isPending, startTransition] = useTransition()

const handleSubmit = () => {
  startTransition(async () => {
    const error = await updateName(name)
    if (error) {
      setError(error)
      return
    }
    redirect('/path')
  })
}

새로운 훅: useActionState

Actions의 공통 사례를 쉽게 처리: 비동기 액션의 결과, pending 상태, 오류 등을 관리할 수 있습니다.

const [error, submitAction, isPending] = useActionState(
  async (prevState, formData) => {
    const error = await updateName(formData.get('name'))
    if (error) return error
    redirect('/path')
    return null
  },
  null
)

React DOM:
Actions 및 useFormStatus

함수를 action 및 formAction prop으로 전달: 폼 제출을 자동으로 관리하며, 제출 후 폼을 자동으로 재설정합니다.

2024-10-22

읽는 시간 3분

리액트에서의 클로저

클로저는 자바스크립트에서 기본이 되는 아주 중요한 개념이다.

기술 면접에서 1순위로 자주 물어보는 개념이기 때문에, 나도 기술 면접을 준비하며 외웠던 기억이 난다.

하지만, 실무에서 클로저가 어떻게 쓰이는지 잘 이해하지 못했고, 이를 실제로 어떻게 응용해야 할지 고민하던 시기가 있었다. 이번에 클로저 개념을 더 심도 있게 공부해보려 한다.

문제

customHook에 함수를 파라미터로 넘겨줄 때, useCustom 컴포넌트가 언마운트되는 상황에서 해당 함수가 실행될 때, 함수 내부의 state 값이 어떻게 출력되는지 살펴보자.

import useCustom from './hooks/useCustom'
import { useState } from 'react'

export default function Home() {
  const [state, setState] = useState(0)

  useCustom(() => console.log('inner func state:', state))

  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
      <div>{state}</div>
      <button onClick={() => setState(state + 1)}>+</button>
    </div>
  )
}

import React, { useEffect } from 'react'

const useCustom = (func: Function, state: any) => {
  console.log('params state:', state)
  useEffect(() => {
    return () => func()
  }, [])

  return <div>useCustom</div>
}

export default useCustom

코드 설명

2024-09-11

읽는 시간 2분

useCallback

해당 궁금증을 해소 하기 전 배경에는, useEffect dependency 배열에 함수가 들어가는 상황에 대해서 공부하고 있던 시점이다.

보통 커스텀 훅을 만들 때에는 해당 훅 컴포넌트의 props에 상태 값을 받아오고, 그 상태 값을 useEffect 내부 dependency배열에 넣어 동작을 처리 한다.

그렇다면 함수를 props로 받아올 땐 어떤가? 고민해보았다.

함수가 의존성 배열에 들어가는 이유

리액트 컴포넌트가 렌더링될 때마다 함수는 다시 생성된다.

자바스크립트에서는 함수가 일급 객체이므로, 동일한 이름의 함수라도 매 렌더링 시 새롭게 생성된 함수는 이전 함수와 다르게 취급된다.

2024-04-02

읽는 시간 4분

최신 글 이전 글