React 인터뷰 준비

1. useState와 useRef의 차이점은 무엇입니까?

답변:-

• useState는 기능 구성 요소에서 상태 변수를 선언하는 데 사용됩니다. 상태가 변경되면 구성 요소가 다시 렌더링됩니다.

• useRef는 .current 속성이 전달된 인수(initialValue)로 초기화되는 변경 가능한 ref 객체를 반환합니다.

• 반환된 개체는 구성 요소의 전체 수명 동안 유지됩니다.

• useRef의 일반적인 사용 사례는 하위 구성 요소의 속성에 명령적으로 액세스하는 것입니다. 참조의 .current 속성을 ​​변경해도 구성 요소가 다시 렌더링되지 않는다는 점에 유의하는 것이 중요합니다.

2. React의 포털이란 무엇인가요?

• 일부 시나리오에서 루트 DOM 노드 외부에 구성 요소를 렌더링해야 한다고 가정해 보겠습니다. 여기서는 포털을 사용할 수 있습니다.

• 모달/일부 팝업 구성 요소에 사용할 수 있습니다.

3. 왜 슈퍼 클래스 구성요소가 필요한가요?

답변:-

• 하위 클래스 생성자는 super()가 호출될 때까지 이 참조를 사용할 수 없습니다.

• super()를 호출하지 않으면 초기화되지 않았기 때문에 JavaScript에서 오류가 발생합니다. 이는 하위 클래스의 컨텍스트에서 super()가 호출될 때까지 초기화되지 않기 때문입니다.
  

class Parent {
  constructor() {
    this.name = 'Parent';
  }
}

class Child extends Parent {
  constructor() {
    super(); // Must call super() here
    this.name = 'Child';
  }
}

4. useCallback vs useMemo vs React.memo

답변:-

• useCallback은 종속성 중 하나가 변경된 경우에만 변경되는 콜백 함수의 메모화된 버전을 반환하는 후크입니다.
• 불필요한 렌더링을 방지하기 위해 참조 동일성에 의존하는 최적화된 하위 구성 요소에 콜백을 전달할 때 유용합니다.

import React, { useState, useCallback } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>
        Click me
      </button>
    </div>
  );
}

• useMemo는 종속성 중 하나가 변경된 경우에만 다시 계산하는 메모된 값을 반환하는 후크입니다. 비용이 많이 드는 계산에 유용합니다.

 import React, { useState, useMemo } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  const expensiveValue = useMemo(() => {
    // Perform expensive calculation here
    return computeExpensiveValue(count);
  }, [count]);

  return (
    <div>
      <p>Expensive value: {expensiveValue}</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

• React.memo는 함수 컴포넌트의 결과를 기억하고 props가 변경될 때만 렌더링하는 고차 컴포넌트입니다.
• 동일한 props를 사용하여 동일한 결과를 렌더링하는 구성 요소에 대한 불필요한 렌더링을 방지하는 데 유용합니다.

import React from 'react';

const MyComponent = React.memo(function MyComponent(props) {
  // render logic here
});

export default MyComponent;

참고:-
useCallback은 함수를 메모하는 데 사용되고, useMemo는 값을 메모하는 데 사용되며, React.memo는 구성 요소를 메모하는 데 사용됩니다.

5. 위의 기능인 useMemo, Memo, useCallback을 과도하게 사용하면 어떻게 되나요?

메모리 사용량:

• React.memo를 과도하게 사용하면 구성 요소의 이전 버전을 메모리에 저장하므로 애플리케이션의 메모리 사용량이 늘어날 수 있습니다.

성능 문제:

• 이러한 후크와 React.memo는 성능을 최적화하기 위한 것이지만 과도하게 사용하면 실제로는 반대 효과를 가져올 수 있습니다.

• 예를 들어 useMemo와 useCallback은 비용이 들며, 이를 방해하는 계산이 Hook을 사용하는 비용보다 비싸지 않으면 성능이 저하될 수 있습니다.

6. 반응 컴포넌트와 반응 요소의 차이점은 무엇입니까?

답변:-

반응 구성 요소:

• React 구성 요소는 선택적으로 입력을 받아들이고 React 요소를 반환하는 함수 또는 클래스입니다. 구성 요소를 재사용할 수 있으며 비공개 상태를 유지할 수도 있습니다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

반응 요소:

• React Element는 DOM 노드나 기타 구성 요소 측면에서 화면에 표시하려는 내용을 설명하는 일반 객체입니다. 요소는 소품에 다른 요소를 포함할 수 있습니다.
• React 요소를 만드는 것은 저렴합니다. 요소가 생성되면 결코 변경되지 않습니다.

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

7. Redux의 핵심 원리는?

답변:-

• 단일 정보 소스
• 상태는 읽기 전용입니다(직접 업데이트하지 않음)
• 순수함수(리듀서)에 변경사항이 적용되었습니다
• 직렬화 가능한 객체에만 작동합니다.

8. Diffing 알고리즘, 조정 및 React Fiber?

답변:- 동일한 내용에 대한 별도의 기사
React의 최적화 알고리즘 및 프로세스에 대한 심층 분석

9. 리액트 합성 이벤트란 무엇인가요?

답변:- 우리가 확인하고 있는 이벤트는 다양한 브라우저에서 일관되어야 합니다.

예:- PreventDefault(), stopPropagation()

10. 상태를 올려볼까?

답변:- 여러 구성 요소가 동일한 변경 데이터를 공유해야 하는 경우 공유 상태를 가장 가까운 공통 조상으로 올리는 것이 좋습니다.

위 내용은 React 인터뷰 준비의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!