개발/React11 React 19 업데이트 변경 점 React 19React 19가 2024.12 월에 정식 릴리즈되었다.어떤 점이 주요하게 변경되었을까..?React 공식 블로그에서 주요 변경점을 확인할 수 있다. 주요 변경점을 몇 가지 정리해 보자면 다음과 같다. https://react.dev/blog/2024/12/05/react-191. 주요 기능Actions: 비동기 상태 업데이트를 간소화하는 기능으로, 수동으로 대기 상태, 오류 처리, 낙관적 업데이트를 관리할 필요 없이 비동기 함수를 통해 상태를 업데이트할 수 있습니다.useTransition : React19 이전에는 비동기 작업과 같이 사용하면 제약이 있어, 비동기 함수와 같이 사용하도록 개선// Using pending state from Actionsfunction UpdateName.. 2025. 1. 10. 23:54 [React] useDeferredValue 이전 관련 글 2023.03.23 - [개발/React] - [React] lodash를 활용한 debounce 2023.03.26 - [개발/React] - [React] useTransition 알아보기 useDeferredValue useDeferredValue도 useTransition과 마찬가지로 React 18에 들어와서 새로 도입된 HOOK이다. 사용방법 const deferredValue = useDeferredValue(value); useDeferredValue에 값이 들어오게 되면, 렌더링 우선순위에 따라 값을 반환하게 된다. useTransition은 setState와 같은 함수의 우선순위라면, useDeferredValue는 값의 우선순위에 따라 값을 지연하게 된다. 이는 api호.. 2023. 3. 28. 00:22 [React] useTransition 알아보기 useTreansition hook api useTransition은 React 18에 들어오면서 새로 도입된 함수이다. 바로 공식문서의 예제를 보면서 정리하겠다. function App() { const [isPending, startTransition] = useTransition(); const [count, setCount] = useState(0); function handleClick() { startTransition(() => { setCount(c => c + 1); }); } return ( {isPending && } {count} ); } useTreansition 함수의 반환값은 isPending , startTransition 으로 설정된다. isPending은 현재 작업이 지연.. 2023. 3. 26. 23:18 [React] lodash를 활용한 debounce lodash를 활용한 debounce 이전 포스팅에서 디바운스와 쓰로틀링에 대해 정리하였다. Javascript를 사용할 때 아주 유용한 라이브러리 lodash란 라이브러리가 있다 이 라이브러리를 이용하면, debounce 이외에도 자바스크립트에서 지원하지 않는 편한 함수들을 지원해 준다. 공식 사이트는 아래와 같다. https://lodash.com/ Lodash _.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });_.partition([1, 2, 3, 4], n => n % 2);DownloadLodash is released under the MIT license & supports modern environments. Review the build differences &.. 2023. 3. 23. 00:21 [React] useEffect의 cleanup, useLayoutEffect 최근 React 프로젝트를 진행하면서, useEffect에 대해 좀 더 유심히 알게 되었다. React 라이프 사이클 또는 useEffect의 클린업에대해 간단히 정리해보려 한다. useEffect를 자주 쓰게 되면 렌더링이 무분별하게 발생하고, 메모리 누수가 대량으로 일어나게 할 수 있다. 이를 방지하기 위해서는 useEffect 후 클린업 함수를 사용해 주어야 한다. useEffect(() => { const subscription = props.source.subscribe();//subscribe 이벤트 발생 return () => { // Clean up the subscription subscription.unsubscribe(); //subscribe 이벤트 해제 }; }); React 공식.. 2023. 3. 21. 00:37 [React] 디바운스(Debounce), 쓰로틀(Throttle) 디바운스(Debounce)와 쓰로틀(Throttle) - 디바운스와 쓰로틀 React상의 onChange 이벤트로 api의 요청을 계속해서 보낼 시, 서버의 과부하를 막기위해 사용한다. 쉽게 말하면 api 요청을 과도하게 할 경우 서버에 부담이 가기때문에, 이를 막기위한 하나의 방식이라고 생각하면 된다. 디바운스(Debounce) 이벤트가 일어나기 시작할때 여러번 호출이 발생한다면, 제일 마지막이나 제일 처음에 호출된 것만 실행하게 하는 것 디바운스 예제 function Input() { const [text, setText] = useState(''); const [tmpText, setTmpText] = useState(query); useEffect(() => { const debounce = se.. 2023. 3. 19. 21:38 이전 1 2 다음 728x90
