이번 주에는 새로운 React 19 업데이트와 후크에 대해 이야기하겠습니다. 이러한 새로운 업데이트 중 일부를 살펴보고 사용해 본 결과 개발자가 앱, 특히 대화형 양식 관련 애플리케이션을 구축할 때 수행하는 엄격한 활동 중 일부가 단순화되었다는 점에만 동의할 수 있습니다.

저와 함께 새로운 업데이트를 살펴보겠습니다.

React 컴파일러: React 컴파일러는 React 코드를 선택하여 브라우저용 JavaScript 코드로 변환하고 구성 요소 또는 사용자 인터페이스의 상태를 관리합니다. 이 단일 작업은 애플리케이션 성능을 최적화하는 데 도움이 됩니다.

useMemo 후크, useCallback 후크 및 React.Memo에 익숙하다면 구성 요소를 메모(나중에 사용할 수 있도록 값 또는 함수 저장)하는 데 도움이 되므로 다시 사용할 필요가 없다는 것을 이해하게 될 것입니다. 상태 변경이 없을 때 렌더링됩니다. 상태가 변경되면 React는 문제의 구성 요소와 해당 하위 구성 요소를 다시 렌더링하고, 코드에 변경 사항이 없으면 구성 요소는 구성 요소의 이전 메모리, 값 및 상태를 그대로 유지하거나 향후를 위한 후크를 유지합니다. 용도; 이를 통해 구성 요소의 성능을 최적화합니다. 이는 앞서 언급한 후크를 수동으로 호출할 필요 없이 React Compiler가 자동으로 수행하는 작업입니다.

양식 작업: React를 사용하는 가장 큰 장점 중 하나는 상태 관리 및 변경이며, 이는 주로 를 사용할 때 발생합니다. 요소. 양식은 사용자 상호 작용을 보다 효과적으로 생성하고 처리하는 데 도움이 됩니다.

양식 작업을 사용하면 데이터의 실시간 변형을 적용하기 위해 onSubmit 및 onChange와 같은 이벤트 핸들러가 필요하지 않으며 대신 action 소품을 전달할 수 있습니다. 이벤트를 트리거하는 함수를 수신하는

요소에.

const myFunction = async (formData) => {
  const [name, setName] = useState("")

  const updatedName = await nameChange(formData.get("name"))
     setName(updatedName)
}

Submit

이 접근 방식을 사용하면 event.target.value를 통해 데이터를 변경하기 위해 useState를 적용할 필요가 없습니다. 대신 myFunction에서 다음을 수행할 수 있습니다. 인수를 통해 변형된 데이터를 가져옵니다.

이는 양식의 요소에서 이름 속성을 설정해야 함을 의미합니다. 이 방법을 사용하면 이벤트 핸들러를 통해 수동으로 상태를 변경하는 대신 React가 Native React 양식 객체를 통해 양식 자체를 처리할 수 있습니다.

서버 구성 요소: React 19에서는 구성 요소를 번들링하기 전에 클라이언트 애플리케이션 또는 SSR 서버 설정과 별도의 환경에서 서버에 렌더링할 수 있습니다. Server 구성요소는 SSR(서버 측 렌더링)과 동일하지 않지만 React Server 구성요소에는 별도의 서버 환경이 있습니다.
이 기능을 사용하면 구성 요소가 시간 전에 미리 렌더링될 수 있으므로 콘텐츠 표시가 빨라지고 로드 시간이 향상됩니다.

메타데이터: React 19는 유연한 메타데이터를 허용합니다. 개발자는 DocumentHead 구성 요소를 통해 개별 구성 요소의 제목, 설명 및 기타 메타 태그를 관리할 수 있습니다. 이는 SEO(검색 엔진 최적화)를 개선하는 데 도움이 됩니다.

Const AboutUs = () => {
 return (
    
      
      // content
    >
  );
}

React 19에는 일련의 새로운 후크가 있으며, 일부는 새로운 후크이고 다른 일부는 기존 후크를 개선한 것입니다. 아래에서 이에 대해 논의해 보겠습니다.

use() 후크: 사용 후크는 구성 요소 또는 후크 내의 Promise 또는 컨텍스트 값을 읽는 데 직접 사용할 수 있는 실험적 API입니다(현재 알려진 유일한 제한 사항입니다). ).
use 후크는 매우 다양하며 비동기 데이터 가져오기에 사용할 수 있으므로 useEffect 대신 사용할 수도 있습니다. 이는
에 도움이 됩니다. 더 깔끔하고 간결한 코드 블록을 달성하세요.

주의 사항: useEffect는 _useEffect가 _제한 없이 실행된다는 자체 제한 사항이 있기 때문에 useEffect
를 대체하는 것이 아닙니다.

import {use} from "react"
const fetchData = async () => {
    const response = await fetch("https://........");
    return response.json()
}

const userData = () => {
    const user = use(fetchData());

        return (
    
{user.name}
  );
}

"반응"에서 {사용} 가져오기 const fetchData = async () => { const 응답 = 가져오기를 기다립니다("https://........"); response.json() 반환 } const userData = () => { const 사용자 = 사용(fetchData()); 반품 ( ); }

useActionState()
: 이는 상태 변경을 관리하는 데 도움이 되는 새로운 후크입니다. 보류 상태, 오류 처리 및 최종을 관리하는 데 도움이 됩니다. 상태 업데이트. useActionState는 2개의 매개변수(양식이 제출될 때 호출되는 함수와 _initialState
)를 받는 _useReduce _in과 유사하게 작동하며 3개의 값을 포함하는 배열을 반환합니다. 상태의 변형이 있는 경우 현재 상태가 되는 상태, 서버 작업을 호출하기 위해 양식 구성 요소에서 prop으로 전달될 수 있는 새로운 작업(formAction), 그리고 _isPending _은 _부울 _값을 반환하는지 여부 양식이 제출되었습니다.

import {use} from "react"
const fetchData = async () => {
    const response = await fetch("https://........");
    return response.json()
}

const userData = () => {
    const user = use(fetchData());

        return (
    
{user.name}
  );
}

"반응"에서 { useActionState }를 가져옵니다. 비동기 함수 incrementFunction(initialState, formData) { 초기 상태 1을 반환합니다. } 함수 StatefulForm({}) { const [state, formAction, isPending] = useActionState(incrementFunction, 0); console.log(상태); 반품 ( {상태} ) }

이 예에서 incrementFunction은 버튼을 클릭할 때마다 상태에 1를 추가합니다. initialState는 0이고, 버튼을 처음 클릭할 때 1로 증가하여 상태

를 1로 변경하고, 버튼을 한 번 더 클릭할 때마다 마지막에 1을 ​​추가합니다. 구성 요소의 상태입니다.

사용Optimistic() 후크

:

페이지가 완전히 로드되기 전에도 사용자가 자신의 작업 결과를 확인할 수 있는 새로운 후크입니다. 서버가 여전히 데이터 가져오기 모드에 있는 경우에도 페이지는 사용자에게 낙관적으로 렌더링됩니다.

React는 데이터 가져오기가 성공하기를 바라며 의도한 결과를 클라이언트에 표시하고, 데이터 가져오기에 실패하면 잘못된 데이터를 표시하지 않기 위해 React는 이전 상태

의 값으로 되돌아갑니다. . 이 단일 작업은 데이터를 원활하고 빠르게 표시하여 사용자 경험을 향상시키는 데 도움이 됩니다.

useFormStatus()

:

이름에서 알 수 있듯이 useFormStatus는 양식 또는 양식 필드

의 상태를 제공합니다. 이 후크는 매개변수를 사용하지 않지만 확실히 4개의 객체를 반환합니다:

pending: 이는 부울 값을 반환합니다: true 또는 false. 양식이 제출되면 true가 반환되고, 양식이 제출되면 false

가 반환됩니다.

데이터
: 양식이 성공적으로 제출되면 다음과 같이 양식 필드에서 사용자 또는 개체의 정보를 얻을 수 있습니다.

import {use} from "react"
const fetchData = async () => {
    const response = await fetch("https://........");
    return response.json()
}

const userData = () => {
    const user = use(fetchData());

        return (
    
{user.name}
  );
}

(formData.get("이름")) (formData.get("주소"))

방법: 별도로 명시하지 않는 한 양식의 기본 방법은 GET입니다. .method를 사용하여 양식의 메소드를 얻을 수 있습니다. 양식을 제출할 때 문자열 메서드 속성을 POST

로 지정해야 합니다.

action: 이는

요소의 액션 소품에 전달될 함수에 대한 참조입니다.

useFormStatus는 항상 요소 또는

내부에 렌더링되는 구성 요소에서 호출되어야 합니다.

글로 다 적을 수 없는 업데이트가 꽤 많이 있으므로, 너무 많이 읽어도 지루하지 않습니다. React Docs 웹사이트를 클릭하면 다른 업데이트를 확인할 수 있습니다.

저와 함께 즐거운 시간을 보내셨기를 바랍니다.

제 기사가 마음에 드셨다면 팔로우를 부탁드립니다.

고맙습니다. 앞으로 즐거운 한 주 보내세요 친구들.