새로운 React가 테이블에 가져온 것 - 명확한 이해를 얻으세요
- Linda Hamilton원래의
- 2024-11-24 13:16:15378검색
React 19는 2024년 4월 25일에 나왔습니다. JavaScript 세계는 너무 빨리 변하기 때문에 때로는 따라가는 것이 부담스러울 수 있습니다. 하지만 이러한 변화가 React 개발자로서의 삶을 더 쉽게 만들기 위한 것이라면 한 번 살펴볼 가치가 있습니다. 그렇죠? React는 이 생태계에서 매우 중요한 부분이므로 최신 정보를 지속적으로 업데이트하는 것이 필수입니다.
React 19의 가장 좋은 점은 작업을 더 단순하게 만드는 데 중점을 둔다는 것입니다. 업데이트는 React를 더 쉽게 학습하고 까다로운 설정을 처리하는 대신 생성에 더 많은 시간을 할애할 수 있도록 설계되었습니다. 새로운 기능 중 일부는 획기적인 변화를 가져올 수 있으며 작업 방식에 큰 변화를 가져올 수 있으므로 절대 놓치고 싶지 않을 것입니다.
항상 복잡한 말을 쓰지 않고 이해하기 쉽게 설명하려고 노력합니다. 이 글도 예외는 아닙니다. 제 목표는 여러분이 모든 것을 명확하게 이해할 수 있도록 하는 것입니다. React 19의 놀라운 업데이트를 함께 살펴보겠습니다!
React 19는 아직 안정적이지 않습니다. 현재는 React Canary라고 불립니다. 따라서 실제로 제작에 권장되는 것은 아니라는 점 참고해주세요.
리액트 컴파일러
React 애플리케이션을 최적화하기 위해 우리는 useMemo, useCallback 또는 memo와 같은 내장 메소드를 사용합니다. 이는 입력이 변경되지 않으면 React가 코드를 다시 컴파일하지 않도록 지시합니다. 그러나 메모 적용을 잊어버리면 React 리소스와 계산 능력이 낭비됩니다. 이를 해결하기 위해 React 19에서는 React Compiler를 도입했습니다. React의 새로운 컴파일러는 19번째 버전의 새 릴리스의 핵심입니다. 새로운 컴파일러는 백그라운드에서 코드를 최적화하므로 이러한 후크를 제거하고 아름답고 깔끔한 React 구성 요소를 작성하는 데 집중할 수 있습니다.
간단히 말하면, 성능 최적화를 위해 useMemo나 useCallback으로 함수를 래핑할 필요가 없으며, 컴포넌트가 다시 렌더링되는 것을 방지하기 위해 컴포넌트를 메모로 래핑할 필요도 없습니다.
작업(useTransition 후크)
말도 안 되는 얘기 좀 해보자?! React 19가 나오기 전에는 useTransition 후크가 거의 언급되지 않았다는 사실을 알고 계셨나요? 아니면 나만 그런 걸까? 글쎄요, 적어도 저는 특히 주니어 개발자들 사이에서 그런 점을 발견했습니다. 어쨌든, 이전 버전에서는 어떻게 작동했는지에 대한 아이디어를 제공하고 이제 이 기능이 왜 그렇게 중요한지 살펴보겠습니다.
useTransition은 startTransition 함수와 isPending 부울이라는 두 가지 요소가 있는 배열을 반환합니다. startTransition 함수 내에서 상태 업데이트를 래핑하여 전환(우선순위가 낮은 코드)으로 표시할 수 있습니다. 이는 다른 연속 작업이 완료된 후에 startTransition으로 래핑된 부분이 작동하기 시작한다는 의미입니다.
React 18에서 startTransition 함수는 비동기 함수를 직접 지원하지 않았습니다. startTransition은 업데이트를 낮은 우선순위로 표시하도록 설계되었지만 기본적으로 비동기 논리를 처리할 수 없었기 때문에 이는 제한 사항이었습니다.
React 19에서는 이 제한 사항이 해결되었습니다. 이제 startTransition은 비동기 기능을 지원합니다. 즉, 해당 업데이트를 전환으로 표시된 상태로 유지하면서 내부에서 비동기 작업(예: 데이터 가져오기)을 수행할 수 있습니다. 이러한 개선 사항을 통해 startTransition을 보다 유연하고 직관적으로 사용할 수 있으므로 기술적으로는 기존 기능이 개선되었음에도 불구하고 "새로운" 기능처럼 느껴집니다.
?
관례적으로 비동기 전환을 사용하는 기능을 "액션"이라고 합니다.
예를 들어 useState에서 보류 및 오류 상태를 처리할 수 있습니다.
// Before Actions
function UpdateName({}) {
const [name, setName] = useState("");
const [error, setError] = useState(null);
const [isPending, setIsPending] = useState(false);
const handleSubmit = async () => {
setIsPending(true);
const error = await updateName(name);
setIsPending(false);
if (error) {
setError(error);
return;
}
redirect("/path");
};
return (
<div>
<input value={name} onChange={(event) => setName(event.target.value)} />
<button onClick={handleSubmit} disabled={isPending}>
Update
</button>
{error && <p>{error}</p>}
</div>
);
}
React 19는 보류 상태, 오류, 양식 및 낙관적 업데이트를 자동으로 처리하기 위해 전환 시 비동기 함수 사용을 지원합니다. 예를 들어, useTransition을 사용하여 보류 상태를 처리할 수 있습니다.
// Using pending state from Actions
function UpdateName({}) {
const [name, setName] = useState("");
const [error, setError] = useState(null);
const [isPending, startTransition] = useTransition();
const handleSubmit = () => {
startTransition(async () => {
const error = await updateName(name);
if (error) {
setError(error);
return;
}
redirect("/path");
})
};
return (
<div>
<input value={name} onChange={(event) => setName(event.target.value)} />
<button onClick={handleSubmit} disabled={isPending}>
Update
</button>
{error && <p>{error}</p>}
</div>
);
}
비동기 전환은 즉시 isPending 상태를 true로 설정하고, 비동기 요청을 하고, 모든 전환 후에 isPending을 false로 전환합니다. 이를 통해 데이터가 변경되는 동안 현재 UI의 반응성과 대화형을 유지할 수 있습니다.
<양식> 행위
React 팀은 함수를 액션으로 전달하는 지원을 추가했습니다.
export default function App() {
const [name, setName] = useState(
() => JSON.parse(localStorage.getItem("name")) || "Anonymous user"
)
async function formAction(formData){
try {
const newName = await updateNameInDB(formData.get("name"))
setName(newName)
}
}
return (
<>
<p className="username">
Current user: <span>{name}</span>
</p>
<form action={formAction}>
<input
type="text"
name="name"
required
/>
<button type="submit">Update</button>
</form>
</>
)
}
formAction 함수(무엇이든 이름을 지정할 수 있음)는 해당 매개변수 내에서 양식 데이터를 가져옵니다. 각 필드는 이름 속성으로 표시되므로 입력 이름을 지정할 때 주의해야 합니다. formData 매개변수는 실제로 기본 FormData 웹 API 개체입니다. mdn 웹문서에서 확인하실 수 있습니다. 또 다른 좋은 점은 React에서 처리하므로 event.preventDefault()를 적용할 필요가 없다는 것입니다.
양식 Action이 성공하면 React는 자동으로 양식을 재설정합니다. 하지만