리액트 19에서 만나볼 새로운 훅: 개발 효율성의 새 지평

다가올 리액트 19 에서는 새로운 Hook들을 제공합니다. 아직은 다소 먼 미래 처럼 느껴질지도 모르지만, 현재 리액트 실험적 버전인 카나리 에서는 이 새로운 Hook들을 지원하고 있고 이미 공식 홈페이지에서 자세한 설명과 예제가 있는 만큼, 리액트 개발자라면 미리 숙지하고 있으면 유익할 것 같아 상세하게 알아보겠습니다.

use훅: '훅의 최강자'

• 이 훅은 기존의 훅 규칙을 무시하고 조건문 및 반복문 에서도 호출이 가능합니다. 가장 눈 여겨볼만한 점은 Promise를 반환하는 함수의 결과를 직접적으로 사용할 수 있다는 것인데요.따라서, API를 호출할때 더 이상 'useEffect'를 사용하지 않아도 되며, Suspense 컴포넌트를 데이터 로딩 상태를 효과적으로 처리할 수 있습니다. 또한 'useContext'도 이 훅으로 대체할 수 있습니다.

useOptimistic: '낙관적 UI 업데이트'

• Optimistic은 낙관적이라는 뜻을 갖고 있습니다. 낙관적 UI란 서버 응답을 기다리지 않고 UI를 미리 업데이트 하는것을 말하는데요. 인스타에서 좋아요를 누르면 UI가 즉시 응답하는 것을 생각하면 됩니다. 이러한 빠른 피드백을 통해 사용자 경험을 개선할 수 있습니다.

Form Action: 폼 제출의 새로운 방식

• 폼 의 'action' 속성은 폼 제출이 자동으로 처리되는데요. 이제 action 속성에 직접 함수를 할당하여 폼 데이터를 인자로 받아 처리할수 있습니다. 기존에는 onSubmit 이벤트 핸들러를 사용해서 'event.preventDefault()'를 호출하여 폼의 기본 제출 동작을 방지해야 했는데요. 이제는 폼 처리 로직을 더욱 직관적이고 간결하게 처리할 수 있습니다.

useFormStatus: 폼 제출 상태 추적

• 폼 제출 상태를 관리해주어 폼이 제출중인지, 완료되었는지 등의 상태 정보를 제공합니다. 제출중인 상태('pending'), 제출된 데이터('data'), 폼제출방식('method') 그리고 액션 URL('action')이 포함됩니다.

useFormState: 폼 상태 관리

폼 제출 과정 및 그 이후 다양한 작업을 쉽게 처리할 수 있습니다. 예를 들어 폼 제출 후 카운터 값을 증가시키는 것과 같은 작업들이 이에 해당합니다.

이 새로운 훅들을 통해서 데이터 페칭, 폼처리 그리고 낙관적 업데이트를 통해 더욱 효율적인 개발이 가능해질것 같습니다. 라이브러리가 점점 비동기 처리에 대한 복잡성을 줄이고, 개발자가 더욱 편리하게 사용할 수 있는 다양한 API를 제공하는 방향으로 발전하는것 같습니다.

https://velog.io/@typo/new-client-side-hooks-react-19