React18에서 업데이트된 기능
1) 자동 배치
이전 버전: setState()를 여러 번 호출하면 해당 컴포넌트가 매번 리렌더링 되었다
React v.18 : setState() 호출을 자동으로 배치하여 렌더링이 한 번만 실행되도록 처리하여 불필요한 렌더링을 방지하여 성능을 개선
2) 서스펜스 지원
이전 버전 : 데이터 가져오기 등의 비동기 작업에서만 사용되었다.
React v.18 : 서스펜스가 렌더링 지연 및 코드 스플리팅에도 사용될 수 있도록 개선된다. 렌더링이 지연되는 동안 렌더링 대기 시간에 대한 UI를 표시할 수 있게 해주는 유연성을 높인다.
3) 이벤트 처리 개선
이전버전 : 이벤트 처리를 위해 SyntheticEvent 객체를 사용했다.
React v.18 : 브라우저의 원래 이벤트 객체를 직접 사용할 수 있도록 변경된다. 브라우저에서 발생하는 이벤트 처리를 빠르고 정확하게 처리할 수 있도록 해준다
4) 서버 사이드 렌더링
이전버전 : 서버 사이드 렌더링에서 초기 렌더링 속도가 느렸다
React v.18 : 성능이 개선되어 초기 렌더링 속도가 빨라지고, 페이지 로딩 시간이 더욱 단축된다.
3. React18에서 추가된 hook들
1) useId
고유한 ID값을 생성하는 데 사용된다. 애플리케이션에서 ID를 사용해야 하는 경우에 쓰인다.
import { useId } from 'react';
function Component() {
const uniqueId = useId();
return (
<div id={uniqueId}>
...
</div>
);
}
useId hook을 사용하여 고유한 ID값을 생성하고, 이를 div 요소 id 속성에 할당합니다. 이렇게 생성된 ID는 일관성 있고 고유하며, 웹 애플리케이션에서 유용하게 사용될 수 있다.
2) useTransition
사용자 경험을 향상하기 위해 인터랙션 중에 발생하는 UI를 부드럽게 처리할 수 있으며 사용자 경험을 향상시킬 수 있다.
3) useDeferredValue
사용자 인터랙션에 대한 반응성을 향상시키기 위해 사용된다. 인터랙션에 대한 결과를 반환하는 컴포넌트를 만들 때, 이전 렌더링 결과를 사용할 수 있도록 하는 데 사용된다.
사용자 인터랙션에 대한 결과를 반환할 때 즉시 변경되는 것이 아닌 부드럽게 변경되도록 처리할 수 있다.
4) useSyncExternalStore
React 컴포넌트와 외부 데이터 소스 간의 상태를 동기화하기 위한 훅이다. React의 상태와 외부 데이터 소스 간의 동기화를 자동으로 처리해 주기 때문에, 코드를 간결하고 직관적으로 유지가 가능하다.
import { useSyncExternalStore } from 'react-external-store';
function App() {
const { data, loading, error } = useSyncExternalStore('/api/data');
if (loading) {
return <p>Loading...</p>;
}
if (error) {
return <p>Error: {error.message}</p>;
}
return <p>Data: {data}</p>;
}
외부 데이터 소스에서 데이터를 가져오고 있으며 첫 번째 인수로 데이터 가져올 URL을 전달하며, data, loading, error 객체를 반환한다. 이 객체는 외부 데이터 소스에서 가져온 데이터, 데이터를 가져오는 중인지를 나타내는 loading, error 상태를 포함한다.
React 컴포넌트와 외부 데이터 소스 간의 상태를 동기화할 때 코드를 간결화하고 직관적으로 유지가 가능하다. 조금 더 코드 유지 보수성을 높이고, 개발자 생산성 향상이 가능하다.
5) useInsertionEffect
컴포넌트가 DOM에 삽입될 때 호출되는 효과 함수를 만들 때 사용된다. useEffect와 유사하지만 컴포넌트가 DOM에 삽입될 때만 호출된다.
import { useInsertionEffect } from 'react';
function App() {
useInsertionEffect(() => {
console.log('Component inserted into DOM');
});
return <p>Hello World</p>;
}
컴포넌트가 DOM에 삽입될 때만 호출되므로, 이전 렌더링 결과에서는 호출되지 않는다. 그러므로 컴포넌트가 DOM에 직접 삽입이 될 때 호출되는 효과 함수를 간편하게 작성할 수 있다. DOM에 삽입되는 시점에 필요한 초기화 작업을 수행하는데 유용하다.
'주니어 개발자의 Desire! > React' 카테고리의 다른 글
| React 생명주기 그리고 useEffect (2) | 2023.12.13 |
|---|