React 18 변경 사항

 

17에 비해 코드상으로 수정해야할 부분이 많지는 않다는 것이 다행이다. React18은 React 17에서 어떤점이 바꼈는지 알아보자

1.  html과 js를 연결해주는 main.js안에서 사용하는 함수가 바꼈다.
   

   import ReactDOM from 'react-dom'
   import App from './App'
   
   //17
   //ReactDOM.render(<App />, document.getElementById('root'));
   
   //18
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(<App />);

2. Concurrent Rendering
   동시에 일어난 다수의 상태 업데이트 처리하는 기법으로 urgent한 update는 오래 걸리거나 급박하지않은 update보다 우선되어진다.
   만약 엄청나게 많은 component가 동시에 변해야하는 상황이라면 
   React 17에서는 동시에 state 변화가 일어난다고 해도 먼저 일어난 것 순서대로 순차적으로 처리되는 반면
   React 18에서는 동시에 state 변화가 일어나야할 시 우선도를 보고 urgent한 update가 우선되어지고 urgent하지 않거나 오래걸리는 update는 background에서 수행된다.
   
   우선도 구분은 다음 API를 사용하여 우선도가 높은 상태변화와 낮은 상태변화를 구분한다. 
   - useTransition( )
   - startTransition( )
   - useDeferredValue( )
   
   

   useTransition	startTransition	useDefferedValue
   React에게 lower priority의  state update를 알려준다		- React에게 갱신된 값이 준비될때까지 이전값을 UI상 display 해야한다는 것을 알려준다 - 2개의 value 중 하나는 업데이트가 빠르고 나머지 하나는 업데이트가 느린경우 느린 업데이트의 value에 대해서는 update전 값을 보여준다.
   함수형 컴포넌트에서 사용한다	hook이 사용될 수 없는 환경에서 사용한다
   [isPending, startTransition] 반환 //isPending은 현재 background에서 state가 변화하고 있음을 알려준다
   startTransition(()=>setUser(user));		const deferredVal=useDeferredValue(value);

   import { useTransition } from 'react';
       
   const [isPending, startTransition] = useTransition();
   // Urgent
   setInputValue(input);
   
   // Mark any state updates inside as transitions
   startTransition(() => {
     // Transition
     setSearchQuery(input);
   })
   {isPending && <Spinner />}

   import { useState, useDeferredValue } from "react";
       
   function App() {
     const [input, setInput] = useState("");
     const deferredValue = useDeferredValue(text, { timeoutMs: 3000 }); 
   
     return (
       <div>
         <input value={input} onChange={handleChange} />
         <MyList text={deferredValue} />
       </div>
     );
    }

3. State Batching 개선
   State Batching: 다수의 state 업데이트가 함께 실행된다. 그러므로 컴포넌트가 한번만 업데이트된다.
   

   function increaseCouterHandler() {
     //Two state update calls batched together
     // +3 씩 이뤄진다
     setCounter((curCounter)=>curCounter+1);
     setCounter((curCounter)=>curCounter+2);
   }
   
   function increaseCouterAsyncHandler() {
     setTimeout(()=>{
       //Two state update calls not batched when using react 17
       //+3 씩 이뤄지는데 오직 asynchronous 환경에서만 이뤄졌다
       setCounter((curCounter)=>curCounter+1);
       setCounter((curCounter)=>curCounter+2);
     })
   }

4. Suspense 개선
   Suspense: Code(or data) fetching과 관련된 UI updates를 도와주는 component. 주로 lazy loading할때 사용한다.
   React 18에서는 Server side rendering 환경에서도 Suspense를 사용할 수 있다.