리액트 19

React 19의 새로운 기능

REACT 19의 새로운 기능은 무엇인가요?

1. 반응 컴파일러

새로운 소식은?

• React는 수동 개입 없이 자동으로 재렌더링을 최적화합니다.

• 더 이상 필요 없음: useMemo(), useCallBack(), React.memo

React 컴파일러를 사용해야 하는 이유

• 수동 최적화는 개발자에게 지루한 일이었습니다.

• 이제 React는 상태 변경과 로직 다시 렌더링을 자동으로 처리합니다.

혜택

• React는 무엇을 다시 렌더링할지, 언제 다시 렌더링할지 결정합니다.

• 개발자의 노력이 줄어듭니다.

• 더 깔끔하고 단순한 코드베이스.

• 현재 인스타그램을 제작 중입니다.

2. 서버 구성 요소

새로운 소식은?

• 클라이언트가 아닌 서버에서 실행되는 구성 요소.

• 이전에는 Next.js에 의해 개척되었습니다(V13에서는 기본값).

• React 19에서는 서버 구성요소가 기본적으로 통합됩니다.

혜택

• SEO 친화적: 검색 엔진 최적화를 향상합니다.

• 성능 향상: 초기 페이지 로드 속도가 빨라집니다.

• 서버 측 실행: API 호출과 같은 작업을 효율적으로 처리합니다.

서버 구성 요소를 사용하는 방법 ?

1. 클라이언트 측(기본값): 모든 React 구성 요소가 클라이언트 측에서 실행됩니다.

2. 서버 측: 구성 요소의 첫 번째 줄에 'use Server'를 추가합니다.
   

'use server';

export default async function requestUsername(formData) {
  const username = formData.get('username');
  return canRequest(username) ? 'successful' : 'failed';
}

주요사항

• 서버 구성요소는 클라이언트에서 실행되지 않습니다.

• 액션과 결합하여 양식 처리 및 API 요청과 같은 작업을 간소화합니다.

• Next.js 사용자는 이미 서버 구성 요소를 활용할 수 있습니다. React 19는 이를 React에 직접 제공합니다.

3. 행동

• React19 이전: 비동기 상태 수동 처리.

function handleSubmit() {
  setloading (true);
  try {
      const result = await saveData();
      setData(result);
      } 
  catch (err) 
     {
     setError(err);
     }
  finally
     {
     setloading(failse);
     } 
}

• React19 이후: 깔끔한 비동기 처리를 위해 useActionsState를 사용합니다.

const [state, formAction] = useActionState(async (prevState, formData) => {
   const result = await saveData(formData);
   return result;
   }, null);

• 로드, 오류 및 상태 업데이트를 자동으로 처리합니다.

4. 새로운 후크

USEACTIONSTATE: 양식 처리

제출 상태와 양식 유효성 검사를 자동으로 관리합니다.

• REACT19 이전:

const [isSubmitting, setIsSubmitting] = useState(false);

async function handleSubmit() {
  setIsSubmitting(true);
  try {
      await submitForm();
      }
  finally 
      {
      setIsSubmitting(false);
      }
}

• REACT19 이후:

useActionState는 양식 제출을 단순화합니다.

const [state, formAction] = useActionState(async (prevState, formData) => {
    return await submitForm(formData);
});

USEFORMSTATUS: 양식 상태 추적

보류 중, 성공 또는 오류와 같은 양식 상태에 액세스하세요.

const status = useFormStatus();

<button type = "submit" disabled = { status.pending }>
  { status.pending ? "Submitting..." : "Submit" } 
</button>

OPTIMISTIC 사용: OPTIMISTIC UI 업데이트

더 나은 UX를 위해 낙관적 업데이트를 단순화합니다.

• REACT19 전:

UI를 긍정적으로 업데이트했고 되돌리기를 처리했습니다.

'use server';

export default async function requestUsername(formData) {
  const username = formData.get('username');
  return canRequest(username) ? 'successful' : 'failed';
}

• REACT19 이후:

useOptimistic을 사용하면 선언적입니다.

function handleSubmit() {
  setloading (true);
  try {
      const result = await saveData();
      setData(result);
      } 
  catch (err) 
     {
     setError(err);
     }
  finally
     {
     setloading(failse);
     } 
}

5. USE() 후크

use()란 무엇인가요?

use() 후크는 Promise를 직접 처리하여 비동기 데이터 가져오기 및 컨텍스트 소비를 단순화합니다.

• REACT19 전: USEEFFECT 사용

비동기 상태를 수동으로 처리합니다.

const [state, formAction] = useActionState(async (prevState, formData) => {
   const result = await saveData(formData);
   return result;
   }, null);

• REACT19 이후: USE() 후크

비동기 데이터를 직접 가져오고 Promise를 해결

const [isSubmitting, setIsSubmitting] = useState(false);

async function handleSubmit() {
  setIsSubmitting(true);
  try {
      await submitForm();
      }
  finally 
      {
      setIsSubmitting(false);
      }
}

장점:

• useEffect 또는 useState가 필요하지 않습니다.
• 더 깔끔하고 선언적인 코드입니다.
• 약속을 원활하게 처리합니다.

6. 서버 구성 요소

서버 구성요소란 무엇입니까?

서버 구성 요소는 서버에서 렌더링되고 간단한 결과를 클라이언트에 보내 성능을 향상시킵니다.

• REACT19 이전: 기존 클라이언트 - 사이드 렌더링

데이터를 가져오려면 useEffect를 사용해야 했고 SSR에는 복잡한 도구가 필요했습니다.

const [state, formAction] = useActionState(async (prevState, formData) => {
    return await submitForm(formData);
});

• REACT19 이후: 서버 - 사이드 렌더링

React 서버 구성요소는 완벽하게 통합됩니다.

const status = useFormStatus();

<button type = "submit" disabled = { status.pending }>
  { status.pending ? "Submitting..." : "Submit" } 
</button>

장점:

• 더 빠른 페이지 로드(무거운 클라이언트측 JS 없음).
• SEO가 향상되고 번들 크기가 줄어듭니다.

7. 향상된 자산 로딩

React19는 이미지 및 스크립트와 같은 자산이 백그라운드에서 로드되는 방식을 개선합니다.

• REACT19 전:

수동 구성이 필요했습니다.

function handleClick() {
 setItems([...items, newItem]);
 saveItem(newItem).catch(() => setItems(items)); // Revert on error
}

• REACT19 이후: 네이티브 지연 로딩

이제 개입 없이 자산이 효율적으로 로드됩니다.

const [optimisticItems, addOptimisticItem] = useOptimistic(items);

function handleClick() {
 addOptimisticItem(newItem);
}

장점:

• 로드 시간이 빨라졌습니다.
• 지연 시간 감소로 사용자 경험이 향상되었습니다.

결론

React 19는 다음을 제공합니다.

• Action을 통한 단순화된 비동기 상태 관리.
• useActionState와 같은 새로운 후크
• useFormStatus 및 UseOptimistic.
• 간편한 비동기 데이터 처리를 위해() 후크를 사용하세요.
• 더 나은 성능을 위한 원활한 서버 구성요소.
• 더 깔끔한 참조 관리 및 향상된 자산 로딩.

위 내용은 리액트 19의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!