React 18 - 업데이트 사항

원티드 프리온보딩 프론트엔드 챌린지4월 사전과제 중,
React 18 버전의 업데이트관련사항 정리가 있어 해당 내용을 다시 정리해본다.

Automatic Batching

React 17버전까지는 이벤트 핸들러 내부에서 발생하는 상태변경만 하나로 통합하여 처리 후 리렌더링을 진행했다. 이 경우, 이벤트 핸들러에 콜백을 받아 처리하는 메소드가 존재하는경우에는 내부 콜백이 완료된 후에는 배치처리가 통합되지 않는 단점이 있었다.

React 18에서는 이러한 비효율성을 해결하고자 상태 업데이트를 하나로 통합하여 리렌더링을 진행한다.

// 17버전

funtion App(){
	const [change,setChange] = useState("")
    const [change2,setChange2] = useState("")
    
    const onClick=()=>{
    	axios.get("URL").then(res=>{
        	setChange("첫번째변경!!!")
            setChange2("두번째변경!!!")
        })
    
    }

	console.log("렌더링")
}
//해당 onClick이벤트를 실행할 경우, 두번의 렌더링이 발생한다.

// 18버전

funtion App(){
	const [change,setChange] = useState("")
    const [change2,setChange2] = useState("")
    
    const onClick=()=>{
    	setChange("첫번째변경!!!")
    	axios.get("URL").then(res=>{
            setChange2("두번째변경!!!")
        })
    
    }

	console.log("렌더링")
}
// React18버전에 setChange가 콜백함수 안에 있다면 렌더링은 한번 이루어지지만,
   콜백함수 밖에서 수행된다면, 두번의 렌더링이 발생한다.

Transition

개발을 하면서 특정부분은 즉각적인 렌더링을 해주고, 어떤 부분은 렌더링을 후순위로 미뤄도 되는 경우가 있다.
가장 많이 드는 예시로는 검색어 입력이다.

검색창에 검색어를 입력할때, 입력하는 Input은 즉각적인 렌더링을 해줘야하며,
입력한 검색어의 연관 검색어는 즉각적인 렌더링보다는 시간차를 두고 렌더링 혹은 후순위로 미루는게 효율적일 수 있다.

React 18 버전에서는 useTransition을 통해 해당 문제를 해결 가능하다.

funtion App(){
	const [isPending, startTransition] = useTransition();
    const [keyword,setKeyword] = useState("")
	const [keywordList,setKeywordList] = useState([])
    
	const onInputChange = (e) =>{
    	startTransition(()=>{
			setKeywordList(["해당부분 렌더링은 후순위로 미뤄줘요!!!"])        
        })
    }
    
    return(
    	<div>
			<input type="text" onChange=(onInputChange)/>
            <div>
            	{keywordList.length && keywordList.map((item)=>{
                	return(
                		<div>
                        {item}
                        </div>
                )
                })
            </div>
        </div>
    )
}
// 편의상 keywordList를 컴포넌트로 분리하지 않고 하나의 코드에 포함시켰습니다.

위의 코드를 실행하면 keywordList가 업데이트되어 렌더링되는 중간에 keyword가 변경되면
keywordList가 포함된 컴포넌트의 렌더링을 일시적으로 중단시킨다.

useTransition의 isPending을 통해 트랜지션이 진행중인지 알 수 있다.

Suspense

특정 컴포넌트가 로딩되는 경우 Suspense로 감싸주어 로딩 이미지등을 보여줄 수 있다.
즉, 해당 컴포넌트는 로딩을 계속 진행하면서 다른 컴포넌트들의 렌더링을 진행할 수 있다.

<Suspense fallback={<Progress/>}
	<BigLoadingComponents/>
</Suspense>