2023. 10. 17. 16:49ㆍ카테고리 없음
- 리액트의 렌더링 성능 향상을 위해 어떻게 해야 하나요?
불필요한 렌더링을 줄여야한다. PureComponent나 React.memo, useCallback이나 useMemo를 통한 메모이제이션으로 중복 계산을 방지하고 렌더링 성능을 향상시킬 수 있다. 코드스플리팅이나 Lazy loading 및 이미지 최적화 등 다양한 방법이 있고 상황에 맞게 사용해 성능을 개선할 수 있다.
- tanstack-query에 대해 들어봤나요?
리액트 쿼리는 리액트에서 데이터 관리를 위한 상태 관리 라이브러리입니다. API 호출, 상태 캐싱, 데이터 업데이트 및 동기화, 오류 처리 등을 처리하는 간편하고 직관적인 방식을 제공합니다. 또한 보일러플레이트 코드를 제거할 수 있어서 개발자에게 큰 편의를 제공합니다.
서버상태로는 로딩, 성공, 실패, 캐싱, 리프레시가 있고 크게 옵저버(Observer)와 쿼리(Query)라는 개념이 있는데 옵저버는 React Query에서 비동기 데이터 요청을 추적하고 업데이트를 처리하는 객체입니다. 주요 역할은 쿼리의 상태 변화를 감지하고 이에 따라 UI를 업데이트하는 것입니다. React Query에서 제공하는 useQuery 또는 useMutation hook을 사용하여 옵저버를 생성합니다. 다양한 상태 변경 이벤트에 대한 콜백 함수 등 옵저버를 통해 쿼리의 상태 변화를 감지하고 UI를 업데이트할 수 있습니다 쿼리는 React Query에서 비동기 데이터 요청을 나타내는 객체입니다. useQuery hook을 사용하여 쿼리를 생성하고, 서버로부터 데이터를 가져오는 등의 작업을 수행합니다. 쿼리는 옵저버의 업데이트를 트리거하고, 서버로부터 데이터를 요청하고, 데이터를 받아옵니다. 옵저버와 함께 사용하여 비동기 데이터 요청을 처리하고 UI를 업데이트할 수 있습니다.
- React 18 버전 업데이트 내용에 대해 말씀해주세요.
컨커런트(Concurrent) 렌더링:
이전 버전에서는 렌더링이 동기적으로 진행되었고, 화면에 UI가 나타나기 전에는 렌더링을 중단할 수 없었다.
리액트는 메인 스레드를 방해하지 않으면서도 백그라운드 상에서 새로운 화면을 준비할 수 있게 되었다.
덕분에 무거운 렌더링이 진행중이더라도 사용자 인터랙션이 있을 때 즉각적인 UI 피드백을 줄 수 있다.
Automatic Batching:
배칭은 더 나은 성능을 위해서 여러 상태 변화를 한번의 리렌더링으로 묶어서 처리하는 것이다. 이전에는 리액트 이벤트 핸들러에서만 배치되고, promisses, setTimeout, native event handlers나 다른 이벤트는 기본적으로 배치되지 않았다. 자동 배칭 덕분에 이러한 업데이트들도 자동으로 배치된다. 디폴트로 자동 배치를 지원하며, 만일 자동 배칭을 비활성화하려면 flushSync를 사용하면 된다
- useEffect와 useLayoutEffect의 차이점에 대해 말씀해주세요.
실행 시점:
- useEffect: 비동기적으로 실행됩니다. 컴포넌트의 렌더링이 완료된 후에 실행됩니다. 이는 화면에 표시된 후에 부수 효과를 처리하고자 할 때 주로 사용됩니다.
- useLayoutEffect: 동기적으로 실행됩니다. 렌더링 직후, 화면에 표시되기 전에 실행됩니다. 이는 렌더링 이전에 DOM 조작이 필요한 경우에 사용됩니다.
성능:
- useEffect는 비동기로 실행되기 때문에 렌더링과 상관없이 작업을 수행하므로 렌더링 성능에 미치는 영향이 적습니다.
- useLayoutEffect는 동기적으로 실행되기 때문에 렌더링의 중단 및 차단을 일으킬 수 있으며, 따라서 주의해야 합니다. 대부분의 경우 useEffect를 사용하는 것이 좋습니다.
사용 사례:
- useEffect는 데이터 로딩, 네트워크 요청, 타이머 설정, 애니메이션 등과 같이 렌더링과 독립적인 부수 효과에 적합합니다.
- useLayoutEffect는 DOM 조작, 레이아웃 계산, 리플로우 등과 같이 렌더링과 관련된 작업에 사용됩니다. 레이아웃 변경을 가하면 사용자 경험에 영향을 미칠 수 있으므로 주의해서 사용해야 합니다.
- Context API에 대해 설명해주세요
Context API는 React 애플리케이션에서 전역 상태를 관리하고 상태를 컴포넌트 트리를 통해 전달하는 데 사용되는 React의 기능 중 하나입니다. 이를 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 손쉽게 전달할 수 있습니다. 주로 상태 관리와 테마 설정과 같은 애플리케이션의 공통 데이터를 공유할 때 사용됩니다. Context API를 사용하면 상태를 더 이상 상위 컴포넌트에서 하위 컴포넌트로 명시적으로 전달하지 않아도 됩니다. 이를 통해 코드를 간결하게 유지하고, 상태 관리를 더 효과적으로 할 수 있습니다.