2022년에 알아야 할 20가지 React 인터뷰 질문 및 답변

React는 오늘날 시장에서 가장 빠르게 성장하는 JavaScript 프레임워크 중 하나입니다. 프론트 엔드 개발자를 꿈꾸는 경우 모든 주요 개념을 배우는 데 도움이 될 몇 가지 중요한 React 인터뷰 질문 을 정리했습니다 .

단일 페이지 또는 모바일 애플리케이션을 위한 사용자 인터페이스를 구축하는 것은 React를 사용하는 것이 좋습니다. 그리고 면접에서 이 도구에 대해 질문을 받을 가능성이 가장 큽니다. 바로 이 때문에 React 인증 및 단기 집중 과정도 수요가 많습니다.

좋은 첫인상을 남기는 데 도움 이 되는 최고의 React 인터뷰 질문 은 다음과 같습니다.

상위 React 인터뷰 질문 및 답변

1. 실제 DOM과 가상 DOM 비교

실제 DOM 업데이트는 느리지만 HTML을 직접 업데이트할 수 있습니다. 요소가 업데이트되면 새 DOM을 만듭니다. 그러나 이 경우 DOM 조작은 비용이 많이 들고 상당한 메모리 낭비를 유발할 수 있습니다.

Virtual DOM은 더 빠르게 업데이트할 수 있으며 요소가 업데이트되면 JSX를 업데이트합니다. HTML을 직접 업데이트할 수 없습니다. 그러나 이 프로그래밍 개념에서는 DOM 조작이 쉽습니다. 그리고 메모리 낭비 문제가 없습니다.

2. React를 간단한 용어로 설명하기

React는 2011년 Facebook에서 개발한 JavaScript 라이브러리입니다. 2015년에 오픈 소스가 되어 개인 개발자 및 회사 커뮤니티에서 인기를 얻었습니다. React는 복잡하고 인터랙티브한 모바일 및 웹 UI 개발에 유용합니다. 재사용 가능한 구성 요소를 구축하기 위해 구성 요소 기반 접근 방식을 사용합니다.

3. React의 몇 가지 기능 나열

React는 가상 DOM과 서버 측 렌더링을 사용합니다. 또한 단방향 데이터 흐름인 데이터 바인딩의 원칙을 따릅니다. 이 세 가지 기능은 React에 대한 명확한 개요를 제공합니다.

4. React의 장점은 무엇인가요? 또한 몇 가지 제한 사항을 나열하십시오.

React는 Meteor, Angular 등과 같은 다른 JavaScript 프레임워크와 통합하는 것이 어렵지 않습니다. 이 도구를 사용하면 UI의 테스트 케이스 작성이 편리해집니다. 클라이언트와 서버 측 모두에서 사용하기 쉬운 도구입니다. React의 또 다른 장점은 앱 성능을 향상시킨다는 것입니다. 또한 코드는 JSX로 인해 가독성이 높습니다.

이제 몇 가지 단점을 살펴보겠습니다.

첫째, React는 완전한 프레임워크가 아니라 라이브러리입니다. 인라인 템플릿과 JSX는 코딩을 복잡하게 만들 수 있으며 이는 초보 프로그래머가 이해할 수 있는 작업이 될 수 있습니다. React 라이브러리는 방대하기 때문에 이해하는 데 시간이 많이 걸릴 수 있습니다.

5. React JSX란 무엇입니까?

JSX는 JavaScript XML의 축약형입니다. HTML 태그를 React 요소로 변환하여 HTML과 같은 구문으로 JavaScript의 표현력을 캡처합니다. JSX는 HTML 태그를 반응 요소로 변환합니다. 이러한 유형의 파일은 이해하기 쉽고 결과적으로 강력한 고성능 응용 프로그램이 됩니다.

6. 브라우저가 JSX를 읽을 수 있습니까?

아니요, 브라우저는 JavaScript 개체만 읽을 수 있습니다. 따라서 브라우저에서 JSX를 읽을 수 있도록 해야 합니다. 이 연습에는 JSX 파일을 브라우저에 전달하기 전에 JavaScript 객체로 변환하는 작업이 포함됩니다. Babel과 같은 변압기도 같은 용도로 사용할 수 있습니다.

7. 가상 DOM의 작동 설명

가상 DOM은 처음에 실제 DOM의 가벼운 복사본입니다. 노드 트리 형태의 JavaScript 객체입니다. React의 render 함수는 요소, 속성 및 객체 속성을 포함하는 React 구성 요소에서 노드 트리를 생성합니다. 사용자 또는 시스템의 다양한 작업으로 인해 데이터 모델이 변형되고 이 트리가 업데이트됩니다. 가상 DOM의 3단계 프로세스는 다음과 같은 방식으로 작동합니다.

1. 기본 데이터가 변경되면 전체 UI가 다시 렌더링됩니다.
2. 그런 다음 새로운 가상 DOM 표현을 이전 표현과 비교하고 차이를 계산합니다.
3. 실제 DOM은 실제 변경 또는 차이점을 고려하여 업데이트됩니다.

8. React와 Angular를 구별하십시오.

Angular는 React의 가상 DOM 및 단방향 데이터 바인딩과 비교하여 실제 DOM 및 양방향 데이터 바인딩을 사용합니다. 런타임 디버깅이 있고 React처럼 컴파일 타임 디버깅이 아닙니다. 또한 Angular는 Google에서 관리하고 React는 Facebook 제품입니다.

9. "React의 모든 것은 컴포넌트입니다." 동의하십니까?

React 애플리케이션의 사용자 인터페이스는 구성 요소라는 빌딩 블록으로 구성됩니다. 구성 요소는 전체 UI를 재사용 가능한 독립적인 조각으로 나눕니다. 그런 다음 이러한 조각은 UI의 나머지 부분과 독립적으로 렌더링됩니다.

10. React에서 render()의 목적은 무엇입니까?

React의 각 구성 요소에는 기본 DOM 구성 요소를 나타내는 단일 요소를 반환하는 render()가 있습니다. 둘 이상의 HTML 요소를 렌더링해야 하는 경우 요소가 함께 그룹화됩니다. 요소는 <group>, <form>, <div> 등과 같은 닫는 태그 내부에 그룹화됩니다. 이 함수는 호출될 때마다 동일한 결과를 반환해야 합니다.

다음은 준비에 도움이 되는 몇 가지 일반적인 React 인터뷰 질문 과 답변입니다. 개념을 더 잘 이해할 수 있도록 몇 가지를 더 살펴보겠습니다.

11. React에서 props는 무엇인가요?

속성은 React에서 'props'라고 합니다. 이들은 읽기 전용이며 응용 프로그램 전체에서 부모에서 자식으로 전달되는 변경할 수 없는 구성 요소입니다. 특히 동적으로 생성되는 경우 데이터의 단방향 흐름을 유지하는 것이 필수적입니다. 따라서 자식 구성 요소는 props를 부모 구성 요소로 다시 보낼 수 없습니다.

12. React에서 상태 설명하기

상태는 this.state()를 사용하여 액세스하는 React 구성 요소의 핵심입니다. 상태는 기본적으로 구성 요소의 렌더링 및 동작을 결정하는 데이터 소스입니다. props와 달리 state는 대화형 구성 요소를 만드는 변경 가능한 개체입니다.

읽기: Python 개발자 인터뷰 질문 및 답변

13. React 구성 요소의 수명 주기에는 어떤 단계가 있습니까?

React 구성 요소의 수명 주기에는 세 가지 주요 단계가 있습니다. 이것들은:

• 초기 렌더링: 구성 요소가 DOM으로 이동합니다.
• 업데이트: props 또는 상태 변경이 발생하면 구성 요소가 업데이트되거나 다시 렌더링됩니다.
• 마운트 해제: 구성 요소가 파괴되고 DOM에서 제거됩니다.

14. React에서 ref는 어떻게 사용되나요?

render()에 의해 반환된 특정 요소에 대한 참조를 반환할 수 있습니다. Refs 속성은 이것을 가능하게 합니다. 따라서 refs는 렌더 구성 함수에서 반환할 React 구성 요소에 대한 참조를 저장합니다. 우리는 일반적으로 컴포넌트에 메소드를 추가하거나 DOM에 측정을 추가하기 위해 ref를 사용합니다.

15. 통제된 구성요소와 통제되지 않은 구성요소

제어되는 구성 요소와 제어되지 않는 구성 요소의 주요 차이점은 전자는 props를 통해 현재 값을 가져오고 후자는 refs를 통해 얻는다는 것입니다. 제어 구성 요소는 콜백을 통해 변경 사항을 알릴 수 있으므로 자체 상태를 유지하지 않습니다. 상위 구성 요소는 해당 데이터를 제어합니다. 반면에 제어되지 않는 구성 요소는 상태를 유지하고 DOM은 데이터를 제어합니다.

읽기: 최고의 블록체인 인터뷰 질문 및 답변

16. React에서 이벤트 설명하기

React에서 키 누르기, 마우스 호버링, 클릭 등과 같은 특정 반응은 이벤트로 알려진 반응을 유발합니다. 이벤트 인수에는 이벤트 핸들러만 액세스할 수 있는 고유한 속성 및 동작 집합이 포함되어 있습니다. 이벤트는 함수로 전달되고 camelCase를 사용하여 이름이 지정됩니다.

17. Flux는 무엇을 의미합니까?

Flux는 런타임 오류를 줄여 애플리케이션에 안정성을 제공하는 아키텍처 패턴입니다. 중앙 '저장소'를 사용하여 데이터에 대한 권한을 유지하면서 서로 다른 구성 요소 간의 통신을 가능하게 합니다. 애플리케이션 전체의 모든 업데이트는 여기에서만 이루어져야 합니다.

18. Redux란 무엇입니까? 구성 요소는 무엇입니까?

Redux는 JavaScript 애플리케이션의 상태 관리에 사용되는 예측 가능한 상태 컨테이너입니다. 단일 상태 트리 또는 '저장'을 사용하여 전체 애플리케이션의 상태를 한 곳에 저장합니다.

Redux는 다음 부분으로 구성됩니다.

• 액션: 일어난 일을 설명하는 객체
• 감속기: 상태가 어떻게 변경될지 결정합니다.
• Store: 객체와 상태로 구성된 전체 애플리케이션의 트리
• 보기: Store에서 제공한 데이터를 표시합니다.

읽기: MongoDB 인터뷰 질문 및 답변

세계 최고의 대학에서 온라인으로 소프트웨어 과정을 배우십시오 . 이그 제 큐 티브 PG 프로그램, 고급 인증 프로그램 또는 석사 프로그램을 획득하여 경력을 빠르게 추적하십시오.

19. 감속기의 중요성은 무엇입니까?

감속기는 특정 작업에 대한 응답으로 애플리케이션의 상태가 어떻게 변경되는지 지정합니다. 활동 유형에 따라 리듀서는 어떤 업데이트가 필요한지 결정한 다음 새 값을 반환합니다. 변경이 필요하지 않은 경우 동일한 이전 상태를 반환합니다.

20. React 라우터 란 무엇입니까?

React Router는 JavaScript 애플리케이션에 새로운 화면과 흐름을 추가하는 데 도움이 되는 라우팅 라이브러리입니다. 이 라이브러리를 앱에 추가하여 각각 고유한 페이지로 연결되는 여러 경로를 만듭니다. URL은 웹 페이지에 표시되는 것과 일치합니다.

이것 으로 모든 인터뷰에서 직면하게 될 React 인터뷰 질문 의 대부분을 다뤘습니다 . 이 모든 주제를 철저히 하면 프론트엔드 개발 작업을 시작하는 데 도움이 됩니다!

React에 대해 자세히 알아보려면 upGrad & IIIT-B의 Full-stack Software Development의 Executive PG Program을 확인하세요. 이 프로그램은 일하는 전문가를 위해 설계되었으며 500시간 이상의 엄격한 교육, 9개 이상의 프로젝트 및 과제, IIIT를 제공합니다. -B 동문 상태, 실질적인 실습 캡스톤 프로젝트 및 최고의 기업과의 취업 지원.