logo

리액트 19버전 정리

주요 새로운 기능

  1. Actions
  • 비동기 함수 지원 강화: useTransition을 사용하여 비동기 함수에서 자동으로 pending 상태, 오류 처리, 낙관적 업데이트를 관리할 수 있습니다.
const [isPending, startTransition] = useTransition()

const handleSubmit = () => {
  startTransition(async () => {
    const error = await updateName(name)
    if (error) {
      setError(error)
      return
    }
    redirect('/path')
  })
}
  1. 새로운 훅: 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
)
  1. React DOM:
    Actions 및 useFormStatus
  • 함수를 action 및 formAction prop으로 전달: 폼 제출을 자동으로 관리하며, 제출 후 폼을 자동으로 재설정합니다.

읽는 시간 3분

소수 체크

function isPrime(num) {
  if (num === 2) {
    return true
  } else if (num % 2 === 0) {
    return false
  }
  let sqrt = parseInt(Math.sqrt(num))
  for (let i = 3; i <= sqrt; i = i + 2) {
    if (num % i === 0) {
      return false
    }
  }
  return true
}
읽는 시간 1분

약수 구하기

약수 : 어떤 정수를 나머지 없이 나눌 수 있는 정수

  1. 모든 수를 나눠서 약수 구하기

조건 : 나누었을때 나머지의 값이 0이면 추가

조건을 만족 못했을때는 추가

조건 범위 : 약수는 최대 자기 자신까지 되기 때문에 반복문에서 자기 자신 값 이하로 설정

    let num = 8; // 약수를 찾기 위한 정수 설정
    let result = []
    let index = 1;
    
    while (index <= num) {
      if (num % index === 0) result.push(index)
      index++
    }
    console.log(result) // [ 1, 2, 4, 8 ]
  1. 주어진 수의 절반을 대상으로만 확인하기

약수는 본인을 제외하고 num/2 보다 클 수 없기 때문에 절반 값 까지만 체크

읽는 시간 2분