React JS 인터뷰 질문(2022)

전화 인터뷰 라운드 후, 당신은 당신의 자격과 기술에 대한 일반적인 질문과 함께 워크 인 인터뷰에 직면해야합니다. 개방형 질문의 일반적인 준비 외에도 기술적인 질문에 답변하는 방법도 알아야 합니다.

자신감과 카리스마로 질문에 답하더라도 기술적인 질문에는 정확해야 합니다. 인터뷰에 참석하기 전에 준비해야 할 몇 가지 기술적인 질문을 정리했습니다.

이것을 React JS 인터뷰 중에 예상할 수 있는 질문 유형의 예로 고려하십시오.

Q.1) Real DOM과 Virtual DOM의 차이점을 설명해 주십시오.

답변: Virtual DOM은 더 빠르게 업데이트되지만 HTML을 직접 업데이트할 수는 없습니다. 요소가 업데이트되면 JSX를 업데이트할 수 있습니다. 메모리를 낭비하고 싶지 않다면 탁월한 옵션이며 조작도 쉽습니다.

반면 Real DOM 업데이트는 느리지만 HTML을 직접 업데이트할 수 있습니다. 그러나 요소 업데이트에서 생성된 DOM은 조작하는 데 비용이 많이 들기 때문에 비용 효율적이지 않습니다. 그 외에도 Real DOM에는 많은 저장 공간이 필요합니다.

Q.2) '리액트'를 어떻게 표현하시겠습니까?

답변: Reach는 재사용 가능한 UI 구성 요소를 형성하는 데 도움이 되는 구성 요소 기반 접근 방식을 따르는 Facebook에서 개발했습니다. 복잡한 모바일 UI 및 대화형 웹을 만드는 데 사용되는 프론트 엔드 JavaScrip 라이브러리입니다. React는 2015년에 오픈 소스였으며 현재 광범위한 커뮤니티 지원을 받고 있습니다.

Q.3) React를 사용할 때의 가장 큰 장점을 알려주실 수 있나요?

답변: React는 애플리케이션 성능의 효율성을 높이고 클라이언트와 서버 측 모두에서 사용할 수 있습니다. React로 작성된 코드는 JSX로 인해 읽을 수 있으며 UI 테스트 작성이 번거롭지 않습니다. React를 Angular 및 Meteor와 같은 다른 프레임워크와 쉽게 통합할 수 있습니다.

Q.4) React의 3가지 주요 기능은 무엇인가요?

답변: React는 실제 DOM 대신 가상 DOM을 사용합니다. 서버 측 렌더링을 사용하는 동안 데이터 바인딩 또는 단방향 흐름을 따르며,

Q.5) React에 한계가 있다고 생각하나요?

Ans: 네, 초보 프로그래머가 이해하기 힘들고 JSX와 인라인 템플릿으로 인해 코딩이 매우 어려울 수 있다고 생각합니다. 또한 광범위한 프레임워크이기 때문에 React에 익숙해지는 데 시간이 걸립니다.

Q.6) VIrtual DOM과 그 작동에 대해 설명하시오.

답변: 가상 DOM은 실제 DOM의 복사본이며 가벼운 JavaScript 개체입니다. 모든 속성, 내용 및 요소를 속성과 함께 개체로 나열하는 노드 트리입니다. React의 render 함수는 구성 요소에서 노드 트리를 만듭니다. 사용자 또는 시스템이 여러 작업을 수행할 때 데이터 모델의 돌연변이에 응답하도록 트리를 계속 업데이트합니다.

Virtual DOM의 작동은 다음 세 단계를 따릅니다.

1. 첫째, 데이터에 약간의 변경이 있는 경우에도 전체 UI가 Virtual DOM 표현으로 렌더링됩니다.
2. 이것은 계산된 새 DOM과 이전 DOM의 표현 사이에 차이를 만듭니다.
3. 실제 DOM은 계산이 완료된 후에 변경된 사항으로만 업데이트됩니다.

Q.7) JSX에 대해 무엇을 알고 있는지 알려주십시오.

답변 : JSX는 React가 javascript의 표현력을 활용하기 위해 HTML과 같은 템플릿 구문과 함께 사용하는 파일입니다. HTML 파일을 이해하기 쉽게 만드는 JavaScript SML의 약어입니다. JSX는 애플리케이션의 효율성과 성능을 높이는 데 사용됩니다.

Q.8) React와 Angular의 차이점을 설명해주세요.

답변 : React와 Angular 사이에는 몇 가지 주요 차이점이 있습니다. 예를 들어 전자는 MVC만 보고 후자는 완전한 MVC를 보는 아키텍처입니다. 렌더링의 경우 Angular는 클라이언트 측 렌더링을 사용하고 React는 서버 측 렌더링을 사용합니다. React는 가상 DOM과 단방향 데이터 바인딩을 사용하고 Angular는 양방향 데이터 바인딩과 함께 실제 DOM을 사용합니다. Angular의 디버깅은 런타임 디버깅이고 React는 컴파일 타임 디버깅입니다. 마지막으로 Google은 Angular를 만들었고 React 빌드에 대한 크레딧은 Facebook에 있습니다.

Q.9) Props는 무엇을 의미합니까?

답변: Props는 변경 불가능하거나 순수하게 유지되어야 하는 읽기 전용 구성 요소이며 'Properties in React'의 약어입니다. 응용 프로그램에서는 데이터의 단방향 흐름을 유지하는 데 도움이 되는 상위 구성 요소에서 하위 구성 요소로 전송됩니다. 소품은 또한 동적으로 생성되는 데이터를 렌더링하는 데 도움이 됩니다.

Q.10) React에서 state는 무엇이며 어떻게 사용하나요?

답변 : 상태는 React 구성 요소의 영혼이며 데이터 소스이므로 단순화해야 합니다. 상태는 구성 요소의 동작과 렌더링을 결정하는 객체라고 말할 수 있습니다. 변경 가능하고 대화형 및 동적 구성 요소를 만드는 데 효율적이기 때문에 상태를 변경할 수 있습니다.

Q.11) state와 props의 가장 큰 차이점은 무엇인가요?

답변: props의 부모 구성 요소는 상태에서 발생할 수 없는 동안 값을 변경할 수 있습니다. 그러나 상태의 구성 요소 내부에 변경 사항이 있지만 props의 경우에는 그렇지 않습니다. 상위 컴포넌트와 유사하게 하위 컴포넌트도 변경 사항이 없지만 props에서 관찰할 수 있습니다.

Q.12) state와 props의 유사점은 무엇인가요?

답변 : state와 props 사이에는 크게 세 가지 유사점이 있습니다.

1. 둘 다 부모 구성 요소에서 초기 값을 받습니다.
2. 두 경우 모두 구성 요소 내부에 기본값을 설정할 수 있습니다.
3. 자식 컴포넌트에서는 초기값을 쉽게 설정할 수 있습니다.

Q.13) 상태 저장 구성 요소는 무엇입니까?

답변: 구성 요소 메모리의 상태 변경은 상태 저장 구성 요소에 저장되며 상태를 변경하고 상태에 있는 모든 변경 사항을 인식할 수 있는 권한도 있습니다. Stateless 구성 요소는 필요한 상태 변경에 대해 통지한 후 props를 보냅니다.

Q.14) 상태 비저장 구성 요소란 무엇을 의미합니까?

답변: 컴포넌트의 내부 상태는 stateless 컴포넌트에 의해 계산되며 상태를 변경할 수 있는 권한이 없습니다. 그들은 현재, 과거, 미래의 상태 변화에 대한 지식이 부족합니다. 마지막으로 상태 저장 구성 요소는 콜백 함수로 취급하는 소품을 보냅니다.

Q.15) 합성 사건을 기술하십시오.

답변: 브라우저의 기본 이벤트 주위에 브라우저 간 래퍼로 동작하는 개체를 합성 이벤트라고 합니다. 주요 기능은 여러 브라우저의 동작을 결합하여 하나의 API를 만드는 것입니다. 이렇게 하면 다양한 브라우저에서 이벤트의 일관된 속성이 보장됩니다.

Q.16) ref는 무엇이며 언제 사용해야 하나요?

Ans: Ref는 React에서 References를 의미하며, 특정 React 컴포넌트나 요소의 참조를 저장하는 속성입니다. 구성 요소의 렌더 구성 기능은 이러한 참조를 반환합니다. 중요한 구성 요소에 메서드를 추가하고 DOM 측정값을 얻는 데 도움이 됩니다. 또한 참조를 사용하여 초점을 관리하고 미디어 재생 또는 텍스트를 선택할 수 있습니다. 또한 타사 DOM 라이브러리와 통합하고 명령형 애니메이션을 트리거하는 데 도움이 됩니다.

Q.17) 통제된 구성요소는 무엇입니까?

답변: 제어 구성 요소는 상태를 유지할 수 없으며 상위 구성 요소는 데이터를 제어합니다. 또한 props의 도움으로 현재 값을 획득하고 콜백을 사용하여 변경 사항을 알립니다.

Q.18) 제어되지 않는 구성 요소에 대해 무엇을 알고 있습니까?

답변: 제어되지 않은 구성 요소는 상태를 유지합니다. 여기에서 DOM은 제어되는 구성 요소와 달리 데이터를 제어합니다. 그들은 또한 ref를 사용하여 현재 값을 도출합니다.

Q.19) Redux의 장점을 서술하시오.

답변: Redux는 다음과 같은 이점을 제공합니다.

• 조직 : Redux에서 팀워크가 더 쉬워집니다. Redux는 코드의 조직에 특화되어 더 일관성이 있기 때문입니다.
• 테스트 용이성 : 코드는 격리되고 작고 순수한 기능을 가지고 있기 때문에 독립적이고 테스트 가능합니다.
• 커뮤니티 : Redux는 여러 애플리케이션을 구축하면서 라이브러리를 지속적으로 개선하는 크고 재능 있는 커뮤니티의 백업을 보유하고 있습니다.
• 개발자 도구 : 개발자는 상태 변경에서 작업에 이르기까지 애플리케이션의 모든 것을 쉽게 추적할 수 있습니다.
• 서버 측 렌더링 : redux에서는 저장소를 클라이언트 측으로 보내기만 하면 되므로 애플리케이션의 성능이 향상되므로 더 나은 사용자 경험을 제공할 수 있습니다.
• 유지 보수성 : 코드는 엄격한 구조와 예측 가능한 결과를 가지므로 유지 관리가 더 쉽습니다.
• 결과 예측 가능성 : 현재 상태 작업을 응용 프로그램의 일부와 동기화하는 데 혼란이 없습니다. 저장소 소스가 하나만 있기 때문입니다.

결론

지속적이고 헌신적이라면 React J를 배우는 것이 복잡하지 않습니다. 프로그래밍 언어를 완전히 알고 나면 모든 인터뷰를 쉽게 해결할 수 있습니다. 지금 막 언어를 탐색하고 있거나 지식을 심화하고 싶다면 리버풀 존 무어 대학교(Liverpool John Moore University )의 컴퓨터 공학 이학 석사를 확인하십시오. 이 19개월 과정에는 React, Java, JavaScript, Spring, Hyperledger 및 Ethereum을 포함한 인기 있는 도구 중 일부가 포함되어 있습니다.

이 과정을 마치면 React에 대해 깊이 이해할 수 있습니다. 뿐만 아니라 소프트웨어 개발자/엔지니어, 풀 스택 개발자, 블록체인 개발자, 클라우드 전문가/아키텍트, 사이버 보안 엔지니어, 데이터 엔지니어 및 DevOps 엔지니어와 같은 고임금 역할을 수행할 수 있습니다.