"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", blockquote: "blockquote", code: "code", div: "div", figure: "figure", h1: "h1", h2: "h2", li: "li", line: "line", p: "p", path: "path", pre: "pre", span: "span", strong: "strong", svg: "svg", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["2024년 12월 5일, React 19가 ", _jsx(_components.code, { children: "npm" }), "에 정식으로 릴리즈 됐어요.\nReact 공식 홈페이지에 소개된 ", _jsx(_components.a, { href: "https://ko.react.dev/blog/2024/12/05/react-19#whats-new-in-react-19", children: "What's New in React 19" }), "를 통해 바뀐점을 하나씩 알아볼게요."] }), "\n", _jsx(_components.h1, { children: "React 19에서 새로워진 것들" }), "\n", _jsx(_components.h2, { children: "Actions" }), "\n", _jsx(_components.p, { children: "그동안 리액트에서는 데이터가 변형(mutation)되면 그 응답을 받아 상태를 업데이트 하는 방식으로 사용되어왔어요.\n응답받은 결과가 보류, 오류, 정상적 상태 등의 여러 응답이 있을 수 있어 이후의 요청을 수동으로 처리해야 했어요." }), "\n", _jsxs(_components.p, { children: ["그 예제로 ", _jsx(_components.code, { children: "useState" }), "로 처리중인 상태와 에러 상태를 처리하는 코드를 살펴볼게요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " UpdateWishlist" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "item" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "setItem" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "] " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useState" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "<" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "string" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "error" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "setError" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "] " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useState" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "<" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "Error" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " |" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " null" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">(" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "null" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "isPending" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "setIsPending" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "] " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useState" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "<" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "boolean" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">(" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "false" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " handleSubmit" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " async" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " () " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " setIsPending" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "true" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "); " }), _jsx(_components.span, { style: { color: "#6A737D" }, children: "// 요청 보내기 시작" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " error" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " await" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " updateWishlist" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(item); " }), _jsx(_components.span, { style: { color: "#6A737D" }, children: "// 위시리스트 업데이트 요청" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " setIsPending" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "false" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "); " }), _jsx(_components.span, { style: { color: "#6A737D" }, children: "// 요청 완료" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " if" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (error) {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // 에러가 있는 경우 (null이 아닌 경우)" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " setError" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(error);" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " redirect" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"/path\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "); " }), _jsx(_components.span, { style: { color: "#6A737D" }, children: "// 에러가 없는 경우" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " };" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "input" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " value" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{item} " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "onChange" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{(" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "e" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " setItem" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(e.target.value)} />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "button" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{handleSubmit} " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "disabled" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{isPending}>" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " 위시리스트 업데이트" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {error " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "&&" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">{error}} // 에러 메세지 표시" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.p, { children: "이러한 방식으로 에러인 경우와 아닌 경우를 수동으로 분기처리 해야 했어요." }), "\n", _jsxs(_components.p, { children: ["리액트 19에서는 이러한 응답 상태를 자동으로 처리할 수 있는 ", _jsx(_components.code, { children: "Actions" }), "가 도입되었어요.\n", _jsx(_components.code, { children: "useTransition" }), "을 통한 예시를 통해 살펴 볼게요."] }), "\n", _jsx(_components.h2, { children: "useTransition" }), "\n", _jsx(_components.div, { children: _jsxs(_components.blockquote, { className: "callout", style: { borderLeftColor: "#448aff" }, children: ["\n", _jsxs(_components.div, { className: "callout-title note", style: { backgroundColor: "#448aff1a" }, children: [_jsx(_components.span, { style: { color: "#448aff" }, className: "callout-icon", children: _jsxs(_components.svg, { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide-pencil", children: [_jsx(_components.line, { x1: "18", y1: "2", x2: "22", y2: "6" }), _jsx(_components.path, { d: "M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z" })] }) }), _jsx(_components.strong, { children: _jsx(_components.p, { children: "useTransition?" }) })] }), "\n", _jsx(_components.div, { className: "callout-content", style: {}, children: _jsxs(_components.p, { children: ["리액트 18에서 도입된 ", _jsx(_components.code, { children: "useTransition" }), "은 여러 상태 업데이트가 UI 변경을 유발하게 될 때 우선순위를 가지게 해요. 무거운 UI 업데이트를 유발하는 상태를 ", _jsx(_components.code, { children: "startTransition" }), "에 넣어 리액트에게 후순위(백그라운드)로 처리하라고 알려줘 반응성을 향상 시키는 훅이에요."] }) }), "\n"] }) }), "\n", _jsx("p", {}), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " UpdateWishlist" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "item" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "setItem" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "] " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useState" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "<" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "string" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "error" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "setError" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "] " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useState" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "<" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "Error" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " |" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " null" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">(" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "null" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "isPending" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "startTransition" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "] " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useTransition" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "();" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " handleSubmit" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " async" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " () " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " startTransition" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "async" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " () " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // 리액트 19부터는 startTransition은 비동기 액션을 지원해요." }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " error" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " await" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " updateWishlist" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(item);" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " if" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (error) {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " setError" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(error); " }), _jsx(_components.span, { style: { color: "#6A737D" }, children: "// error state 업데이트를 후순위로 처리" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " redirect" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"/path\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " });" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " };" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "input" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " value" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{item} " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "onChange" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{(" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "e" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " setItem" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(e.target.value)} />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "button" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{handleSubmit} " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "disabled" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{isPending}>" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " 위시리스트 업데이트" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {error " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "&&" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">{error}} // 에러 메세지 표시" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["이렇게 ", _jsx(_components.code, { children: "useTransition" }), "은 비동기 함수가 요청을 수행하는 동안 UI와 상호작용하게 만들 수 있어요.\n또한 리액트 팀은 ", _jsx(_components.code, { children: "startTransition" }), " 내부에서 사용되는 모든 콜백함수를 ", _jsx(_components.code, { children: "Actions" }), "로 부르는 컨벤션을 제안해요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " handleSubmit" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " () " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " startTransition" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(() " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " submitAction" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(); " }), _jsx(_components.span, { style: { color: "#6A737D" }, children: "// Action 컨벤션" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " });" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "};" }) })] }) }) }), "\n", _jsx(_components.p, { children: "이렇게 할 수 있을거 같네요." }), "\n", _jsxs(_components.p, { children: ["이러한 ", _jsx(_components.code, { children: "action" }), "은 데이터 제출을 자동으로 관리해주는 기능도 제공하게 됐어요."] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["대기 상태, ", _jsx(_components.code, { children: "pending state" }), ":\n요청이 시작될 때 ", _jsx(_components.code, { children: "isPending" }), " 을 통해 대기상태를 제공하고, 상태가 커밋될때 초기화 돼요."] }), "\n", _jsxs(_components.li, { children: ["낙관적인 업데이트, ", _jsx(_components.code, { children: "optimistic updates" }), ":\n새로운 ", _jsx(_components.code, { children: "useOptimistic" }), " 훅을 통해 요청이 제출되는 동안 사용자에게 피드백 제공할 수 있어요."] }), "\n", _jsxs(_components.li, { children: ["에처 처리 ", _jsx(_components.code, { children: "error handling" }), ":\n이제 에러 처리를 제공하고 요청이 실패했을 때 에러 바운더리를 표시할 수 있게 됐어요."] }), "\n", _jsxs(_components.li, { children: ["폼, ", _jsx(_components.code, { children: "form" }), ":\n", _jsx(_components.code, { children: "

" }), " 엘리먼트는 이제 ", _jsx(_components.code, { children: "action" }), ", ", _jsx(_components.code, { children: "formAction" }), " props에 함수를 전달할 수 있어요.\n", _jsx(_components.code, { children: "action" }), " props에 전달한 함수, ", _jsx(_components.code, { children: "Actions" }), "를 통해 제출 후 폼을 자동으로 초기화해요."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["리액트 19에서는 ", _jsx(_components.code, { children: "Actions" }), "가 중요한 개념으로 사용되었어요.\n", _jsx(_components.code, { children: "Actions" }), "와 관련된 새로운 기능들은 다음 포스트에서 더 자세히 알아볼게요."] }), "\n", _jsx(_components.h2, { children: "출처" }), "\n", _jsx(_components.p, { children: _jsx(_components.a, { href: "https://ko.react.dev/blog/2024/12/05/react-19#whats-new-in-react-19", children: "https://ko.react.dev/blog/2024/12/05/react-19#whats-new-in-react-19" }) })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

새로운 React 19, useTransition