상위 74개 React JS 인터뷰 질문 및 답변

르네 알렉산더By르네 알렉산더 시간 최근에 업데이트

React 인터뷰 질문 및 답변

꿈의 직업을 얻기 위한 신입생과 숙련된 후보자를 위한 ReactJ 인터뷰 질문과 답변은 다음과 같습니다.

1) Reactjs란 무엇인가요?

React는 사용자 인터페이스를 쉽게 구축할 수 있게 해주는 JavaScript 라이브러리입니다. 페이스북에서 개발했습니다.

2) React를 사용합니까? HTML?

아니요. HTML과 유사한 JSX를 사용합니다.

무료 PDF 다운로드: React 인터뷰 질문 및 답변

3) React는 언제 처음 출시됐나요?

React는 2013년 XNUMX월에 처음 출시되었습니다.

4) React의 가장 중요한 단점 두 가지를 알려주세요.

  • Rails와 같은 MVC 프레임워크와 React를 통합하려면 복잡한 구성이 필요합니다.
  • React에서는 사용자에게 사용자 인터페이스를 MVC 프레임워크에 통합하는 방법에 대한 지식이 필요합니다.
놓치지 마세요 :

5) Real DOM과 Virtual DOM의 차이점을 설명하세요.

실제 DOM 가상 DOM
천천히 업데이트됩니다. 더 빠르게 업데이트됩니다.
HTML에서 직접 업데이트할 수 있습니다. HTML을 직접 업데이트하는 데 사용할 수 없습니다.
너무 많은 메모리를 낭비합니다. 메모리 소모가 적습니다.
React JS 인터뷰 질문
React JS 인터뷰 질문

6) React에서 Flux 개념은 무엇입니까?

페이스북은 클라이언트 측 웹 애플리케이션 개발에 플럭스 아키텍처 개념을 널리 사용합니다. 이는 프레임워크나 라이브러리가 아닙니다. 단순히 React와 단방향 데이터 흐름(UDI) 개념을 보완하는 새로운 유형의 아키텍처일 뿐입니다.

7) React에서 Redux라는 용어를 정의하십시오.

Redux는 프론트엔드 개발에 사용되는 라이브러리입니다. 애플리케이션 상태 관리에 사용해야 하는 JavaScript 애플리케이션용 상태 컨테이너입니다. Redux로 개발된 애플리케이션을 다양한 환경에서 테스트하고 실행할 수 있습니다.

8) Redux의 '스토어' 기능은 무엇인가요?

Redux에는 애플리케이션의 전체 State를 한 곳에 저장할 수 있는 'Store'라는 기능이 있습니다. 따라서 해당 구성 요소의 모든 상태는 Store에 저장되므로 Store에서 직접 정기적인 업데이트를 받을 수 있습니다. 단일 상태 트리는 시간 경과에 따른 변경 사항을 추적하고 애플리케이션을 디버깅하거나 검사하는 데 도움이 됩니다.

9) Redux에서 액션이란 무엇인가요?

액션 객체를 반환하는 함수입니다. 작업 유형과 작업 데이터는 항상 작업 개체에 저장됩니다. 작업을 통해 Store와 소프트웨어 애플리케이션 간에 데이터를 전송할 수 있습니다. Store에서 검색한 모든 정보는 작업을 통해 생성됩니다.

10) React의 중요한 기능을 말해보세요

React의 중요한 기능은 다음과 같습니다.

  • 타사 라이브러리를 사용할 수 있습니다
  • 시간 절약
  • 더 빠른 개발
  • 단순성과 구성 가능
  • Facebook에서 완벽하게 지원됩니다.
  • 단방향 데이터 바인딩을 통한 코드 안정성
  • 반응 구성 요소

11) 무상태 구성요소라는 용어를 설명하세요.

상태 비저장 구성 요소는 제공된 속성에 대해서만 DOM 기반을 렌더링하는 순수 함수입니다.

12) React Router 설명

React Router는 애플리케이션에 새로운 화면 흐름을 추가할 수 있는 라우팅 라이브러리이며, 페이지에 표시되는 내용과 URL의 동기화를 유지합니다.

13) React 생태계에서 인기 있는 애니메이션 패키지는 무엇입니까?

React 생태계에서 인기 있는 애니메이션 패키지는 다음과 같습니다.

  • 리액트 모션
  • 반응 전환 그룹

14) 제스트란 무엇인가요?

Jest는 Jasmine을 기반으로 Facebook에서 만든 JavaScript 단위 테스트 프레임워크입니다. 자동화된 모의 생성 및 jsdom 환경을 제공합니다. 또한 테스트 구성 요소로도 사용됩니다.

15) 디스패처란 무엇인가요?

디스패처는 작업을 수신하고 등록된 콜백에 페이로드를 브로드캐스트하는 앱의 중앙 허브입니다.

16) 콜백 함수란 무엇을 의미하나요? 그 목적은 무엇입니까?

setState가 완료되면 콜백 함수를 호출해야 하며 구성 요소가 다시 렌더링됩니다. setState는 비동기식이므로 두 번째 콜백 함수를 사용합니다.

17) 고차 성분이라는 용어를 설명하십시오.

간단히 HOC라고도 알려진 고차 컴포넌트는 컴포넌트 로직을 재사용하기 위한 고급 기술입니다. React의 일부가 아닙니다. API, 그러나 이는 React의 구성적 특성에서 나타나는 패턴입니다.

18) 프리젠테이션 부문을 설명하세요.

프리젠테이션 부분은 HTML을 렌더링할 수 있는 세그먼트입니다. 세그먼트의 용량은 마크업으로 표현됩니다.

19) 반응 js의 Prop은 무엇입니까?

Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방식인 속성을 의미합니다. Props는 컴포넌트 간의 통신 채널일 뿐이며, 항상 부모 컴포넌트에서 자식 컴포넌트로 전달됩니다.

20) React에서 super 키워드의 용도는 무엇인가요?

super 키워드는 객체의 부모에 대한 함수에 액세스하고 호출하는 데 도움이 됩니다.

21) JavaScript의 Yield 캐치프레이즈를 설명하세요.

수익률 캐치프레이즈는 지연 및 이력서 Yield 캐치프레이즈로 알려진 생성기 작업입니다.

22) 두 가지 유형의 React 구성 요소 이름

두 가지 유형의 반응 구성요소는 다음과 같습니다.

  • 기능 구성요소
  • 클래스 구성요소

23) React js의 합성 이벤트를 설명하세요.

합성 이벤트는 브라우저의 기본 이벤트를 감싸는 크로스 브라우저 래퍼 역할을 하는 일종의 객체입니다. 또한 다양한 브라우저의 동작을 신호 API로 결합하는 데에도 도움이 됩니다.

24) 반응 상태란 무엇입니까?

특정 구성 요소가 렌더링되는 방식과 작동 방식을 결정하는 개체입니다. 상태는 React 컴포넌트의 수명 동안 변경될 수 있는 정보를 저장합니다.

25) 반응 js에서 상태를 어떻게 업데이트할 수 있나요?

구성 요소의 상태는 직접 또는 간접적으로 업데이트될 수 있습니다.

26) React에서 화살표 함수의 사용법을 설명하세요.

화살표 함수는 콜백으로 전달될 때 버그의 동작을 예측하는 데 도움이 됩니다. 따라서 이로 인해 발생하는 버그를 모두 방지합니다.

27) React의 라이프사이클 단계는 무엇입니까?

React js의 중요한 수명주기 단계는 다음과 같습니다.

  • 초기화
  • 상태/속성 업데이트
  • 파괴는 React의 생명주기이다

28) 찬성과 상태의 주요 차이점을 설명하십시오.

두 가지의 주요 차이점은 State는 변경 가능하고 Pro는 변경 불가능하다는 것입니다.

29) React js의 순수 컴포넌트를 설명하세요

순수 컴포넌트는 어떤 컴포넌트라도 render()만으로 대체할 수 있는 가장 빠른 컴포넌트입니다. 이는 코드의 단순성과 애플리케이션의 성능을 향상시키는 데 도움이 됩니다.

30) React에서는 어떤 종류의 정보가 세그먼트를 제어하나요?

세그먼트를 제어하는 ​​정보에는 주로 State와 Props라는 두 가지 종류가 있습니다.

  • State: 변경될 State 정보, State를 활용해야 합니다.
  • Props: Props는 부모에 의해 설정되며 부품의 수명 내내 유지됩니다.

31) 'create-react-app'이란 무엇인가요?

'create-react-app'은 하나의 기본 반응 애플리케이션을 만들 수 있는 명령줄 도구입니다.

32) 반응 목록에서 '키' 사용을 설명하세요.

키를 사용하면 각 목록 요소에 안정적인 ID를 제공할 수 있습니다. 키는 고유해야 합니다.

33) 어린이 소품은 무엇인가요?

하위 소품은 구성 요소를 다른 구성 요소에 속성으로 전달하는 데 사용됩니다. 다음을 사용하여 액세스할 수 있습니다.

{props.children}

34) 오류 경계를 설명하시겠습니까?

오류 경계는 하위 구성 요소의 어느 위치에서나 Javascript 오류를 포착하는 데 도움이 됩니다. 오류를 기록하고 대체 UI를 표시하는 데 가장 많이 사용됩니다.

35) 빈 태그의 용도는 무엇입니까 <> ?

빈 태그는 React에서 프래그먼트 선언을 위해 사용됩니다.

36) 엄격 모드를 설명하세요

StrictMode를 사용하면 반응 구성 요소에 대한 검사 및 경고를 실행할 수 있습니다. 개발 빌드에서만 실행됩니다. 눈에 보이는 UI를 렌더링하지 않고도 문제를 강조하는 데 도움이 됩니다.

37) 반응형 포털이란 무엇입니까?

Portal을 사용하면 하위 항목을 DOM 노드로 렌더링할 수 있습니다. CreatePortal 메소드 그것을 위해 사용됩니다.

38) 컨텍스트란 무엇입니까?

React 컨텍스트는 반응 구성 요소 트리를 사용하여 데이터를 전달하는 데 도움이 됩니다. 다양한 반응 구성요소 간에 데이터를 전역적으로 공유하는 데 도움이 됩니다.

39) Webpack의 용도는 무엇입니까?

Webpack은 기본적으로 모듈 빌더입니다. 주로 개발 과정에서 실행됩니다.

40) React js의 바벨이란 무엇입니까?

Babel은 ES6, ES7과 같은 최신 JavaScript를 대부분의 브라우저가 이해할 수 있는 일반 ES5 JavaScript로 변환하는 JavaScript 컴파일러입니다.

41) 브라우저는 어떻게 JSX 파일을 읽을 수 있나요?

브라우저가 JSX를 읽도록 하려면 Babel과 같은 JSX 변환기를 사용하여 해당 JSX 파일을 바꾼 다음 브라우저로 다시 보내야 합니다.

42) React에서 MVC 아키텍처를 사용할 때의 주요 문제는 무엇입니까?

MVC 아키텍처를 처리하는 동안 직면하게 될 주요 과제는 다음과 같습니다.

  • DOM 처리는 상당히 비쌉니다.
  • 대부분의 경우 애플리케이션은 느리고 비효율적이었습니다.
  • 순환적인 기능으로 인해 모델과 아이디어를 중심으로 복잡한 모델이 만들어졌습니다.

43) 표현이 한 줄 이상일 때는 어떻게 해야 하나요?

그 당시에는 여러 줄의 JSX 표현식이 남은 유일한 옵션입니다.

44) 감소는 무엇입니까?

축소는 State를 처리하는 응용 방법입니다.

45) 합성 이벤트라는 용어를 설명하십시오.

이는 실제로 브라우저의 기본 이벤트를 둘러싼 브라우저 간 래퍼입니다. 이러한 이벤트에는 stopPropagation() 및 PreventDefault() 인터페이스가 있습니다.

46) 기능 요소에 최상위 요소를 언제 사용해야 합니까?

요소가 단계 또는 수명 주기를 수행하는 경우 최상위 요소를 사용해야 합니다.

47) 파싱에서 요소를 어떻게 공유할 수 있나요?

State를 사용하면 데이터를 공유할 수 있습니다.

48) 화해라는 용어를 설명해주세요

구성 요소의 상태나 소품이 변경되면 나머지는 렌더링된 요소를 이전에 렌더링된 DOM과 비교하고 필요한 경우 실제 DOM을 업데이트합니다. 이 과정을 조정이라고 합니다.

49) setState() 함수를 사용하지 않고 구성 요소를 다시 렌더링할 수 있나요?

모든 구성 요소를 다시 렌더링하려면 forceUpdate() 함수를 사용할 수 있습니다.

50) 반응에서 소품을 업데이트할 수 있나요?

props는 읽기 전용이므로 React js에서는 props를 업데이트할 수 없습니다. 또한, 부모로부터 자식에게 전달받은 소품을 수정할 수 없습니다.

51) '구조조정'이라는 용어를 설명하시오.

구조조정은 추출과정이다. 정렬 사물. 프로세스가 완료되면 각 개체를 별도의 변수로 분리할 수 있습니다.

52) 소품의 값을 업데이트할 수 있나요?

props 값은 변경할 수 없으므로 업데이트할 수 없습니다.

53) 장착 및 분리의 의미를 설명하십시오.

  • DCOM에 요소를 연결하는 프로세스를 마운팅이라고 합니다.
  • DCOM에서 요소를 분리하는 프로세스를 분리 프로세스라고 합니다.

54) 'prop-types' 라이브러리의 용도는 무엇입니까?

'Prop-types' 라이브러리를 사용하면 최근 애플리케이션에서 props 및 유사한 객체에 대한 런타임 유형 검사를 수행할 수 있습니다.

55) 반응 후크를 설명하세요

React Hooks를 사용하면 클래스를 작성하지 않고도 State 및 기타 React 기능을 사용할 수 있습니다.

56) 조각이란 무엇입니까?

DOM에 추가 노드를 사용하지 않고도 조각 키워드를 사용하여 하위 구성 요소 목록을 그룹화할 수 있습니다. 예를 들어 :

render() {

return (
);
}

57) createElement와 cloneElment의 주요 차이점은 무엇입니까?

  • createElement는 반응 요소를 생성하기 위해 반응에서 사용됩니다.
  • cloneElement는 요소를 복제하고 새 소품을 전달하는 데 사용됩니다.

58) 제어 구성요소란 무엇입니까?

제어 컴포넌트는 입력 요소를 제어하는 ​​컴포넌트입니다.

59) 왜 props.children을 사용해야 하나요?

이 props.children을 사용하면 구성 요소를 다른 구성 요소에 데이터로 전달할 수 있습니다.

60) React-dom 패키지의 일부 메소드를 나열해 보세요.

React-dom 패키지의 중요한 방법은 다음과 같습니다.

  • 세우다()
  • 수산화 시키다()
  • 생성포털()
  • unmountComponentAtNode()
  • findDOMNode()

61) React에서 서버사이드 렌더링을 어떻게 할 수 있나요?

반응 서브를 사용하여 서버 측 렌더링을 수행할 수 있습니다.

62) getInitialState()와 constructor()의 차이점을 설명해주세요.

'React.dll'을 확장하여 하나의 컴포넌트를 생성하고 싶다면 Component' 생성자는 State를 초기화하는 데 도움이 됩니다. 하지만 'Reat.createClass.'를 이용해서 생성하고 싶다면. 그런 다음 'genInitiaState'를 사용해야 합니다.

63) 심판이란 무엇입니까?

Ref는 DOM 요소의 속성입니다. 참조의 주요 목적은 DOM 요소를 쉽게 찾는 것입니다.

64) ComponentWillMount()란 무엇입니까?

componentWillMount()는 구성 요소가 시작되면 API를 호출하고 값을 상태로 구성하는 것입니다. API 호출을 하려면 Axios와 같은 HttpClient를 사용하거나 fetch()를 사용하여 AJAX 호출을 트리거할 수 있습니다.

65) 매장 내 데이터를 어떻게 발송하나요?

상위 구성 요소를 저장하는 작업을 기반으로 하는 다른 구성 요소에 데이터를 전달할 수 있습니다.

66) Redux를 사용하여 어떻게 더 많은 작업을 처리할 수 있습니까?

더 많은 작업 흐름에서 동일한 구성 요소를 생성하기 위해 다양한 모듈에서 동일한 기능을 사용하고 있습니다.

67) 환원제를 어떻게 쏟을 수 있나요?

이벤트 조치에 따라 구조 정보를 유출할 수 있습니다. 해당 작업은 별도의 모듈로 분할되어야 합니다.

68) React에서 사용되는 사전 정의된 프로토타입 XNUMX개를 나열해 보세요.

React js에서 사용되는 가장 중요한 프로토타입은 다음과 같습니다.

  • 번호
  • 현
  • 정렬
  • 대상
  • 요소

69) BindActionsCreators를 사용하는 목적은 무엇입니까?

BindActionCreator는 액션 디스패처를 기반으로 이벤트를 HTML 요소에 바인딩하는 데 도움이 됩니다.

70) React에서 REFS란 무엇입니까?

Ref는 요소에 대한 참조입니다. 대부분의 경우에는 피해야 합니다. 그러나 때로는 DOM이나 컴포넌트의 인스턴스에 직접 접근해야 할 때 사용됩니다.

71) JSX 요소를 다른 JSX 구성 요소에 연결할 수 있나요?

예, HTML 요소를 중첩하는 것과 매우 유사한 다른 JSX 구성 요소와 함께 JSX 요소를 첨부할 수 있습니다.

72) 현재 React의 안정 버전은 무엇입니까?

현재 React의 안정 버전은 버전 17.5입니다.

73) Redux 워크플로 기능의 중요한 기능을 설명하세요.

Redux 워크플로의 중요한 기능은 다음과 같습니다.

  • 재설정: 스토어 상태를 재설정하는 데 도움이 됩니다.
  • 되돌리기: 마지막으로 커밋된 상태로 롤백할 수 있습니다.
  • 청소: 실수로 실행할 수 있는 모든 비활성화 작업이 제거됩니다.
  • 커밋: 현재 상태를 초기 상태로 만드는 데 도움이 됩니다.

74) React JS와 React Native의 차이점을 설명하세요

React JS는 UI 구축에 사용되는 프런트 엔드 오픈 소스 JavaScript 라이브러리인 반면, React Native는 개발자가 Android와 같은 플랫폼에서 React를 사용할 수 있는 오픈 소스 모바일 프레임워크입니다. iOS. 이 인터뷰 질문은 귀하의 비바(구술)에도 도움이 될 것입니다.

공유

당신은 좋아할 것입니다 :

댓글 10

  1. 화신 리샤브 말한다 :

    좋은 질문 세트입니다.

    댓글
  2. 화신 발미크 자다브 말한다 :

    64) ComponentWillMount()란 무엇입니까?

    답변이 틀렸네요..

    댓글
    1. 알렉스 실버맨 알렉스 실버맨 말한다 :

      수정됐네요..!!

      댓글
  3. 화신 수바니 말한다 :

    문제 번호 74 "Rect Native"의 철자 오류

    댓글
    1. 알렉스 실버맨 알렉스 실버맨 말한다 :

      안녕하세요, 지적해 주셔서 감사합니다. 수정되었습니다.

      댓글
  4. 화신 폴 플레이셔-졸레토 말한다 :

    좋은 질문입니다. 기능적 후크 질문을 보지 못했습니다. 하나도 없습니다.

    댓글
  5. 화신 아시아 사람 말한다 :

    문제 번호 62 "getIntialState()"의 철자 오류

    댓글
    1. 화신 kishor 말한다 :

      감사합니다. 콘텐츠가 업데이트되었습니다.

      댓글
  6. 화신 아툴 기살리 말한다 :

    React에 더 많은 질문 추가

    댓글
  7. 화신 익명 말한다 :

    구조 조정은 구조 조정이 아니라 파괴라고 말씀하셨습니다. 수정해주세요

    댓글

댓글을 남겨주세요.

귀하의 이메일 주소는 공개되지 않습니다. *표시항목은 꼭 기재해 주세요. *