꼭 알아야 할 React 면접 질문과 답변 50가지

React와 ReactJS는 동일하지만 React Native는 React를 기반으로 구축되었습니다. 차이점으로, React는 웹 애플리케이션의 동적이고 반응성 있는 사용자 인터페이스를 만드는 데 사용되는 반면 React Native는 모바일 앱으로 애플리케이션을 구축하도록 설계되었습니다.

6. Element와 Component의 차이점은 무엇인가요?

React 엘리먼트는 DOM 노드를 나타내기 위해 만들어진 단순하고 불변의 객체입니다. 불변이란 DOM에 렌더링되기 때문에 생성된 후에는 변경할 수 없다는 것을 의미합니다. 반면 React 컴포넌트는 변경 가능하며 렌더링되면 JSX 출력을 생성합니다.

7. 컴포넌트는 어떻게 만드나요?

React에서 컴포넌트를 만드는 방법은 두 가지가 있습니다. 1.) 함수 컴포넌트와 2.) 클래스 컴포넌트. 이름에서 알 수 있듯이 함수 컴포넌트는 함수 선언을 사용하여 생성되고, 클래스 컴포넌트는 클래스 선언을 사용하여 생성됩니다.

//function component
function Hello({ message }) {
  return <h1>{`Function hello, ${message}`}</h1>

}
//class component
class Hello extends React.Component {
  render() {
    return <h1>{`Class hello, ${this.props.message}`}</h1>
  }
}

8. React 컴포넌트의 4단계를 나열하세요

React 구성 요소는 수명 주기에서 다음의 4단계를 거칩니다.

첫 단계 – 초기 props를 사용한 기본 상태에서 구성 요소 생성
장착 단계 – 컴포넌트의 JSX 렌더링
업데이트 단계 – 구성 요소 상태 변경 및 애플리케이션 다시 그리기
언마운트 단계 – DOM에서 구성 요소 제거

9. 상위 구성요소의 의미를 설명하세요

고차 컴포넌트(HOC)는 컴포넌트를 만드는 React 방법론입니다. 기존 컴포넌트를 사용하여 추가 기능이 있는 새 컴포넌트를 만듭니다. 즉, HOC는 컴포넌트를 인수로 받아서 추가 기능이 있는 새 컴포넌트를 반환하는 함수입니다.

10. 제어되는 구성요소와 제어되지 않는 구성요소는 무엇입니까?

제어되는 구성 요소는 props를 통해 값을 가져오고 콜백을 통해 시스템에 변경 사항을 알리는 React 구성 요소입니다. 이는 부모 구성 요소에 의해 제어되며 부모 구성 요소는 이를 관리합니다. 상태 그리고 값을 제어되는 구성 요소에 props로 전달합니다. 반면 제어되지 않는 구성 요소는 상태를 관리하며 쿼리를 실행해야 합니다. DOM 사용 심판 그 가치를 알아내려고요.

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

React의 Props는 속성을 말하는 간단한 방법일 뿐이며, 여기서는 컴포넌트의 속성을 말합니다. Props는 부모 컴포넌트에서 하나 이상의 자식 컴포넌트로 데이터를 전달하는 데 사용되며 자식 컴포넌트에서는 읽기 전용입니다.

12. props.children은 무엇인가요?

Props.children 속성에는 여는 태그와 닫는 태그가 있는 구성 요소의 모든 내용에 대한 정보가 들어 있습니다. 이러한 자식은 현재 구성 요소 내부에 정의된 모든 요소를 참조하며, 하나, 여러 개 또는 아무것도 아닐 수 있습니다.

13. React에서 props를 업데이트할 수 있나요?

아니요, React의 props는 하향식이고 불변입니다. 즉, 컴포넌트는 원하는 속성을 자식에게 보낼 수 있지만 props를 업데이트할 수는 없습니다. 부모만 props를 업데이트할 수 있습니다.

14. JSX란 무엇인가요?

JSX는 JavaScript XML의 약자입니다. React 코드 안에 HTML을 쓸 수 있게 해주는 JavaScript 구문 확장입니다. 브라우저는 어차피 JSX를 이해하지 못하므로 React는 읽을 수 있는 HTML 코드로 렌더링해야 합니다.

15. 컴포넌트와 엘리먼트의 차이점은 무엇인가

엘리먼트는 가상 DOM 노드의 상태 없는 불변 정의입니다. 여기에는 유형과 속성이 모두 포함되지만 컴포넌트와 같은 메서드는 없습니다. 메서드가 없기 때문에 빠릅니다.

16. React에서 state란 무엇인가요?

React의 상태는 구성 요소에 내장된 객체를 말하며, 해당 구성 요소에 대한 정보를 보관하고 관리하는 데 사용됩니다. 상태는 시간이 지남에 따라 변경될 수 있으며, 따라서 해당 구성 요소의 재렌더링을 트리거합니다. 구성 요소의 생성자 메서드에서 상태를 정의해야 하며, 그렇지 않으면 구성 요소가 무상태가 됩니다.

17. 무상태 구성 요소란 무엇입니까?

상태 없는 React 구성 요소에는 상태가 없습니다. 즉, 상태를 설정할 수 없습니다. 이것.setState() 메서드도 렌더링하지 않았습니다. 하지만 상태 없는 구성 요소는 props를 가질 수 있습니다.

18. React에서 상태를 어떻게 업데이트합니까?

구성 요소의 상태를 업데이트하려면 해당 구성 요소를 호출합니다. 이것.setState() 방법.

19. React의 Strict Mode를 설명하세요

React의 strict 모드는 개발자가 구성 요소에 대한 심층적인 검사를 활성화하고 더 많은 경고를 강조하여 애플리케이션의 잠재적인 문제를 발견하는 데 도움이 되는 도구입니다. strict 모드는 개발 모드에서만 사용할 수 있습니다.

20. React에서 State를 Lifting Up한다는 것은 무엇을 의미하나요?

이는 자식 구성 요소가 부모와 공통된 상태를 공유하도록 하는 것을 의미하는데, 이렇게 하면 각 자식 구성 요소가 개별적으로 공통 상태를 관리하는 것보다 작업을 관리하기가 더 쉬워집니다.

21. React에서 데이터를 어떻게 전달하나요?

React에서 props와 callbacks를 사용하여 데이터를 전달합니다. React의 props는 단방향이어서 속성은 부모 컴포넌트에서 자식 컴포넌트로만 전달될 수 있습니다. 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하려면 callback 함수를 사용해야 합니다.

22. 정의 유량 리액트에서

Flux는 애플리케이션에서 데이터 흐름을 지시하는 단방향 개념입니다. 단방향이라는 것은 데이터가 부모 구성 요소에서 자식 구성 요소로만 전달될 수 있음을 의미합니다. Flux는 앱당 여러 데이터 저장소를 포함할 수도 있습니다.

23. 정의 돌아 오는 리액트에서

Redux는 애플리케이션에서 복잡한 상태를 관리하는 데 유용한 오픈소스 JavaScript 라이브러리입니다. 독립적이며 Angular와 같은 다른 프레임워크에서 사용할 수 있습니다. Flux와 달리 Redux는 애플리케이션의 상태 관리를 중앙 집중화하여 복잡한 UI를 더 쉽게 구축할 수 있습니다.

24. Redux를 언제 사용해야 하나요?

모든 앱에 Redux가 필요한 것은 아닙니다. 하지만 다음과 같은 조건에서는 유용합니다.

앱에 대량의 애플리케이션 상태가 있는 경우
앱의 논리가 복잡한 경우
앱에 큰 코드베이스가 있는 경우
앱을 자주 업데이트해야 하는 경우
앱에 많은 사람들이 작업하는 경우

25. Redux와 Flux의 주요 차이점은 무엇입니까?

둘의 가장 큰 차이점은 Redux는 모든 애플리케이션 데이터를 하나의 저장소에서 관리하는 반면, Flux는 여러 개의 저장소를 가질 수 있다는 것입니다.

26. Redux의 구성 요소를 나열하세요

Redux에는 4가지 주요 부분이 있습니다.

스토어 – 여기에 애플리케이션 상태를 저장합니다.
동작 – 이는 앱이 Redux 스토어로 데이터를 전송하는 이벤트입니다.
감속기 – 현재 앱 상태와 작업을 인수로 받아서 새로운 상태를 결과로 반환하는 함수입니다.
미들웨어 – 이 기능을 사용하면 개발자는 구성 요소의 모든 작업이 리듀서 함수에 도달하기 전에 캡처할 수 있습니다.

27. React Hooks는 무엇인가요?

React Hooks는 상태 데이터 및 렌더링 업데이트와 같은 다양한 React 기능에 액세스할 수 있게 해주는 함수형 컴포넌트의 기능입니다. React 16.8에서 도입되었습니다.

28. React의 Hooks 유형을 나열하세요

React에는 useState, useEffect, useContext와 같은 기본 Hook부터 useCallback, useReducer, useMemo, useRef 등과 같은 추가 Hook까지 총 15개 이상의 Hook이 있습니다.

29. 프래그먼트란 무엇인가요?

React fragment는 DOM에 추가하지 않고도 컴포넌트에서 여러 자식 요소를 그룹화하는 편리한 방법입니다. 다음을 사용하여 태그를 정의하기만 하면 됩니다.

그리고 원하는 모든 자식 요소를 로드합니다. 유일한 차이점은 단축 버전 <>는 키와 속성을 허용하지 않는 반면 긴 버전은 허용한다는 것입니다.

30. react-dom 패키지의 주요 메서드를 나열하세요.

createPortal()은 자식을 외부 DOM으로 렌더링하고, flushSync()는 업데이트를 플러싱합니다. 또한 React 18부터 createRoot()와 hydrateRoot()로 대체된 render()와 hydrate() 메서드도 있습니다.

31. React Keys는 무엇인가요?

키는 목록을 관리하는 데 가장 적합한 고유 식별자입니다. 키를 사용하면 목록의 개별 항목을 쉽게 식별하고 각 항목이 업데이트, 삭제 또는 어떤 식으로든 변경되었는지 알 수 있습니다.

32. React Keys가 중요한 이유는 무엇입니까?

키는 React에서 중요한데, 실제 DOM을 효율적으로 렌더링하는 데 도움이 되기 때문입니다. React는 이벤트 후에 다시 렌더링하는 구성 요소를 최소화하려고 하기 때문에 좋으며, 목록에서 키를 사용하면 React가 전체 목록을 다시 렌더링할 필요가 없기 때문에 큰 목록에서는 문제가 될 수 있습니다.

33. React에서 이벤트란 무엇인가요?

이벤트는 사용자 또는 시스템에서 발생하는 앱의 모든 동작입니다. 이벤트는 모바일 기기에서 마우스 클릭 또는 탭부터 창 크기 조정, 키 누름, 드래그, 포커스 등에 이르기까지 다양합니다.

34. 무엇을 설명하세요? 합성 이벤트 방법

합성 이벤트는 브라우저의 기본 이벤트를 감싸는 래퍼로, 문제는 브라우저마다 이벤트 이름이 다르다는 것입니다. React는 합성 이벤트를 사용하여 모든 브라우저에 대해 여러 구현과 메서드를 만들어야 하는 문제를 피합니다. 이런 방식으로 React는 모든 브라우저 이벤트에 대한 공통 이름을 통합 API로 유지합니다.

35. Webpack이란 무엇인가요?

Webpack은 JavaScript와 CSS 파일을 결합하고 최소화하는 데 사용되는 모듈 번들링 시스템입니다. Node.js 기반으로 구축되었으며 이미지와 글꼴과 같은 많은 수의 파일이나 비코드 자산으로 작업할 때 유용합니다.

36. create-react-app은 무엇인가요?

Create-react-app은 Node.js 환경에서 단일 페이지 React 애플리케이션을 만드는 데 도움이 되는 도구입니다. 기본 앱을 시작하는 데 필요한 모든 파일과 폴더를 생성하고 거기서부터 시작합니다. Node 버전 14.0.0 이상과 npm 버전 5.6 이상이 필요합니다.

사용법은 간단합니다:

npx create-react-app myNewApp

cd myNewApp

npm 시작

37. React로 서버 사이드를 렌더링할 수 있나요?

네, 가능하지만 대규모 프로젝트의 경우 리소스가 많이 필요할 수 있습니다. 서버 측 렌더링은 사용자 경험과 SEO를 개선하기 때문에 유용합니다. Node.js 환경, Webpack과 같은 번들러, 다음과 같은 프레임워크가 필요합니다. 다음 .js 및 리믹스 런타임에 React 앱을 렌더링합니다. 집약적인 리소스 사용에 대한 솔루션은 Next.js 기반과 같은 정적 사이트 생성기를 사용하는 것입니다. 개츠비.

38. 화살표 함수의 기능을 설명하세요

화살표 함수는 단순히 함수를 정의하는 더 짧은 방법입니다. 다음을 대체하는 ES6 단축어입니다.

= 함수() 과 ()=>.

예를 들어 :

테스트 = 함수(){

return “이것은 테스트입니다”;

}

그러면 다음과 같이 됩니다:

테스트 = () => {

return “이것은 테스트입니다”;

}

또는 한 줄짜리 문장의 경우:

test = () => “이것은 테스트입니다”;

39. 무엇입니까 반응 라우터?

React 라우터는 React 앱에서 라우팅 기능을 제공하는 라이브러리입니다. 풍부한 탐색 구성 요소를 쉽게 포함하고 사용할 수 있게 해주며, 이는 대규모 또는 복잡한 프로젝트에 매우 유용할 수 있습니다.

40. React Router를 사용하는 주요 장점은 무엇입니까?

앱에 대한 다양한 URL 경로를 생성하고 window.location 값과 history 객체를 제공합니다.

41. ComponentWillUnmount()는 무엇입니까?

이것은 React가 컴포넌트를 파괴하려고 할 때마다 호출되는 컴포넌트 메서드입니다. 물건을 정리하고, 타이머를 지우고, 네트워크 요청을 취소하고, 다른 중요한 초기화 해제 문제를 처리하기에 좋은 곳입니다.

42. 생성자()란 무엇입니까?

생성자는 구성 요소의 초기화 중에 호출되는 구성 요소의 메서드입니다. 일반적으로 로컬 상태를 초기화하고 이벤트 핸들러 메서드를 바인딩하는 데 사용됩니다.

43. 가상 DOM이란 무엇입니까?

React의 가상 DOM은 실제 HTML 문서의 DOM을 가볍게 복사한 것입니다. 실제 DOM의 변경 사항을 효율적으로 관리하고 업데이트하는 데 사용됩니다.

44. 가상 DOM이 실제 DOM에 비해 어떤 장점이 있습니까?

가상 DOM은 실제 DOM보다 가볍고 렌더링이 빠르므로 가상 DOM에 먼저 렌더링하고 필요할 때만 실제 DOM을 변경하는 것이 더 효율적입니다. 실제 DOM의 모든 노드에는 가상 DOM에 해당하는 구성 요소가 있으며 렌더링 후 가상 구성 요소에 변경 사항이 있으면 React는 업데이트하거나 삭제할 실제 HTML 노드를 정확히 알고 있습니다.

45. 용어를 설명하세요 화해 리액트에서

조정은 가상 DOM의 업데이트된 버전을 비교를 통해 확인하고 실제 DOM에서 변경된 노드만 정확하게 업데이트함으로써 필요할 때만 실제 DOM을 업데이트하는 React의 방법입니다.

46. 용어를 설명하세요 프로파일 리액트에서

Profiler는 애플리케이션이 렌더링되는 횟수와 각 구성 요소가 렌더링되는 데 걸리는 시간을 측정하여 앱을 최적화하는 데 도움이 되는 React 도구입니다. 이를 통해 개발자는 최적화가 필요할 수 있는 애플리케이션 부분을 식별하는 데 도움이 됩니다.

47. 용어를 설명하세요 문맥 리액트에서

컨텍스트는 props를 사용하여 각 중첩 레벨을 통해 데이터를 전달하지 않고도 여러 레벨에서 React 구성 요소 간에 데이터를 전달하는 방법입니다. 테마 정보 및 사용자 데이터와 같이 지속적인 업데이트가 필요하지 않은 여러 구성 요소와 쉽게 데이터를 공유하는 데 가장 적합합니다. 단점은 구성 요소 재사용을 어렵게 만들 수 있다는 것입니다.

48. 용어를 설명하세요 설치 리액트에서

React에서 마운팅은 컴포넌트를 노드로 DOM에 첨부하는 프로세스입니다. 언마운팅은 그 반대입니다.

49. 용어를 설명하세요 표현 리액트에서

렌더링은 구성 요소를 그리는 프로세스입니다. 일반적으로 구성 요소의 상태가 변경되고 React가 UI를 다시 그려야 할 때 발생합니다. 렌더링 중에 구성 요소가 다시 그려지면 자식 구성 요소도 다시 그려집니다.

50. 용어를 설명하세요 오류 경계 리액트에서

오류 경계는 자식 구성 요소에서 JavaScript 오류를 포착하고 오류를 기록하고 충돌한 노드 대신 폴백 UI를 표시하는 React 구성 요소를 말합니다. 오류 경계는 React 16에서 도입되었습니다.

결론

이제 React 면접에서 꼭 알아야 할 질문 50가지 목록이 끝났습니다. 이제쯤은 무엇을 기대해야 할지 대충 짐작하셨기를 바랍니다.

또한 아무것도 변하지 않는다는 사실과 인터뷰는 어떤 방향으로든 갈 수 있다는 사실을 기억하세요. 그러므로 공부를 계속하고 최신 정보를 얻어야 합니다.

1. React란 무엇인가요?

2. React의 중요한 기능을 나열하세요

3. React의 프로젝트 저장소는 어디에 있나요?

4. React의 현재 안정적인 버전은 무엇입니까?

5. React Native와 ReactJS의 차이점을 설명하세요