React 성능 개선과 관련된 면접 질문 답변

Q. 메모이제이션이란 무엇이며 React 애플리케이션의 성능을 향상시키기 위해 어떻게 사용할 수 있습니까? A. 메모이제이션은 값비싼 함수 호출의 결과를 캐싱하고 동일한 입력이 다시 제공될 때 캐싱된 결과를 반환하는 기술입니다. React 애플리케이션에서 이는 구성 요소의 불필요한 재렌더링을 방지하고 렌더링 성능을 향상시키는 데 사용할 수 있습니다. Q. React Component와 PureComponent 클래스의 차이점은 무엇이며 언제 사용해야 합니까? A. Component 클래스는 React 애플리케이션에서 사용자 지정 구성 요소를 정의하기 위한 기본 클래스입니다. PureComponent 클래스는 불필요한 재렌더링을 방지하기 위해 props와 state의 얕은 비교를 구현하는 Component의 하위 클래스입니다. PureComponent 클래스는 구성 요소가 소품 또는 상태가 변경될 때 다시 렌더링할 필요가 없을 때 사용해야 합니다. Q. shouldComponentUpdate 수명 주기 메서드는 무엇이며 구성 요소가 다시 렌더링되는 시기를 제어하는 ​​데 어떻게 사용할 수 있습니까? A. shouldComponentUpdate 수명 주기 메서드는 구성 요소가 다시 렌더링되기 전에 호출되는 메서드입니다. 이 메서드는 다음 props 및 state를 인수로 받고 구성 요소가 업데이트되어야 하는지 여부를 나타내는 부울 값을 반환해야 합니다. 이 메서드를 구현하고 구성 요소를 업데이트할 필요가 없을 때 false를 반환하면 불필요한 재렌더링을 방지하고 성능을 향상시킬 수 있습니다. Q. Suspense 및 Lazy 구성 요소는 무엇이며 초기 로딩 성능을 개선하는 데 어떻게 사용할 수 있습니까? A. Suspense 및 Lazy 구성 요소는 구성 요소의 지연 로드를 허용하는 React API에 새로 추가된 것입니다. 이는 구성 요소가 필요할 때까지 로드 및 렌더링되지 않음을 의미하며, 로드 및 구문 분석에 필요한 코드의 양을 줄임으로써 초기 로드 성능을 향상시킵니다. React.Suspense 구성 요소는 지연 로드된 구성 요소를 래핑하는 데 사용되고 Lazy 구성 요소는 지연 로드된 구성 요소 자체를 정의하는 데 사용됩니다. Q. Fragment 구성 요소는 무엇이며 DOM 노드 수를 줄이는 데 어떻게 사용할 수 있습니까? A. Fragment 구성 요소는 DOM에 추가 래퍼 요소를 추가하지 않고도 여러 하위 요소를 렌더링할 수 있는 유틸리티 구성 요소입니다. 이것은 구성 요소가 여러 자식 요소를 렌더링해야 하는 상황에서 유용할 수 있지만 불필요하게 DOM 노드 수를 늘리는 추가 래퍼 요소를 추가하고 싶지는 않습니다. Q. Profiler 구성 요소는 무엇이며 렌더링 성능을 최적화하는 데 어떻게 사용할 수 있습니까? A. Profiler 구성 요소는 개발자가 React 애플리케이션의 렌더링 성능에 대한 타이밍 정보를 수집할 수 있도록 하는 React API에 새로 추가된 것입니다. 이 정보는 성능 병목 현상을 식별하고 렌더링 성능을 최적화하는 데 사용할 수 있습니다. Profiler 구성 요소는 응용 프로그램의 모든 부분에 추가할 수 있으며 해당 범위 내 구성 요소의 렌더링에 대한 타이밍 정보를 수집합니다. Q. StrictMode 구성 요소는 무엇이며 React 애플리케이션에서 잠재적인 런타임 오류 및 성능 문제를 식별하는 데 어떻게 사용할 수 있습니까? A. StrictMode 구성 요소는 해당 범위 내의 구성 요소에 대한 추가 확인 및 경고를 활성화하는 유틸리티 구성 요소입니다. 이는 React 애플리케이션에서 잠재적인 런타임 오류 및 성능 문제를 식별하는 데 유용할 수 있습니다. StrictMode 구성 요소는 애플리케이션의 모든 부분에 추가할 수 있으며 해당 범위 내의 구성 요소에 대한 추가 검사 및 경고를 활성화합니다. 이를 통해 개발자는 잠재적인 문제가 심각한 문제가 되기 전에 포착할 수 있습니다. Q. 코드 분할이란 무엇이며 React 애플리케이션에서 초기 로딩 성능을 개선하는 데 어떻게 사용할 수 있습니까? A. 코드 분할은 대규모 코드베이스를 요청 시 로드할 수 있는 더 작은 청크로 나누는 방식입니다. 이렇게 하면 애플리케이션이 처음 로드될 때 로드하고 구문 분석해야 하는 코드의 양을 줄여 초기 로드 성능을 향상시킬 수 있습니다. React 애플리케이션에서 코드 분할은 구성 요소 및 기타 애플리케이션 코드의 지연 로드를 허용하는 동적 가져오기를 사용하여 구현할 수 있습니다. Q. 프로덕션 레벨 빌드 도구는 무엇이며 React 애플리케이션의 성능을 최적화하는 데 어떻게 사용할 수 있습니까? A. 프로덕션 레벨 빌드 도구는 프로덕션용 React 애플리케이션의 코드를 최적화하는 데 사용되는 도구입니다. 여기에는 일반적으로 코드베이스의 크기를 줄이고 전반적인 성능을 향상시키기 위한 축소, 트리 쉐이킹 및 기타 최적화 기술이 포함됩니다. React를 위한 프로덕션 레벨 빌드 도구의 한 가지 인기 있는 예는 프로덕션을 위한 React 애플리케이션의 구성 및 최적화를 허용하는 Webpack입니다. Q. 서버 사이드 렌더링이란 무엇이며 React 애플리케이션의 성능을 개선하는 데 어떻게 사용할 수 있습니까? A. 서버 사이드 렌더링은 서버에서 React 애플리케이션을 렌더링하고 렌더링된 HTML을 클라이언트에 제공하는 방법입니다. 이를 통해 클라이언트에서 로드 및 구문 분석해야 하는 코드의 양을 줄임으로써 초기 로딩 성능을 개선할 수 있으며, 콘텐츠를 이해하기 위해 페이지의 HTML에 의존하는 검색 엔진 및 소셜 미디어 플랫폼의 사용자 경험도 개선할 수 있습니다. . 서버 측 렌더링은 ReactDOMServer와 같은 라이브러리를 사용하여 구현할 수 있습니다. 이 라이브러리는 React 구성 요소를 서버에서 HTML로 렌더링하는 방법을 제공합니다.