$$config title: React 18의 새로운 기능 keywords: - IT - React $$ # batch 기능 - 원래 onChange로 실시간으로 반응해서 계속 재 랜더링을 해줬지만 - state변경 -> 재랜더링 -> state변경 -> 재 랜더링 이순이 아니라 state변경 state변경 재랜더링 이런식으로 이루어짐 ## useTransition (느린 컴포넌트의 성능 향상을 도와줌 ) ```javascript // 기본 작명법 let [isPending, startTransition] = useTransition(); ``` - useTransition이 늦게 처리를 하게끔 도와주는 함수이니 그거와 맞는 작명을 하면됨 - 성능이 저하되는 state를 startTransition에 감싸주면 됨 ### 예시 ```javascript let a = new Array(10000).fill(0); function App(){ const [name, setName] = useState(' '); let [isPending, startTransition] = useTransition(); // 여기서 isPending는 startTransition이 처리중일 때, // true가 되는 변수 return (

{ startTransition(() => {setName(e.target.value) }) }})} /> {a.map(() =>{ return

{name}

})}

} ``` - 원래 브라우저는 한번에 한개의 일만 가능 하지만 startTransition을 감싸주면 startTransition안에 있는 코드를 약간 늦게 처리를 해주게됨 코드의 시작 시점을 뒤로 늦춰줌 ### 이 훅을 사용함으로서 변하는 실행순서 1. e.target.value를 input에 보여주고 2. 시간이 남았을 때 div 10000개를 보여줌 - 실행의 시점을 조절함으로서 성능 향상을 보여준다 isPending을 활용한다면 ? ```javascript {isPending ? 로딩중: {a.map(() =>{ return

{name}

})} } ``` ## useDeferredValue - 이것도 느린컴포넌트 성능향상가능 ```javascript let state = useDeferredValue(state나 props를 넣으면 된다 ); //안에 넣은 state는 변동사항이 생길 시 늦게 처리해줌 ``` ```javascript ex) return (

{ startTransition(() => {setName(e.target.value) }) }})} /> {a.map(() =>{ return

{name}

})}

// 이 함수를 ``` ```javascript let state= useDeferredValue(name); return (

{ startTransition(() => {setName(e.target.value) }) }})} /> {a.map(() =>{ return

{state}

})}

) // 이런식으로 ```

게시글 상세