React 면접 전 살펴보기 위한 Q&A 40가지 (2024년 ver)

1. React란 무엇인가요?

   React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다.

   재사용 가능한 UI 컴포넌트를 생성하는 데 사용됩니다. 페이스북에서 개발하고 관리합니다.

   
   

2. React를 사용하는 이유는 무엇인가요?

• 동적 애플리케이션 쉽게 만들 수 있음: React를 사용하면 적은 코딩으로 더 많은 기능을 제공하여 동적 웹 애플리케이션을 쉽게 만들 수 있습니다.

• 성능 향상: React는 가상 DOM을 사용하여 웹 애플리케이션의 성능을 높입니다.

• 재사용 가능한 컴포넌트: 컴포넌트는 React 애플리케이션의 구성 요소로, 애플리케이션 전체에서 재사용할 수 있어 개발 시간을 크게 단축할 수 있습니다.

• 단방향 데이터 흐름: React는 단방향 데이터 흐름을 따르므로 디버깅이 쉽고 애플리케이션의 오류 위치를 파악할 수 있습니다.

• 쉬운 디버깅: 페이스북이 발표한 크롬 확장 프로그램을 사용하여 React 애플리케이션을 디버깅할 수 있어 프로세스가 빠르고 쉬워집니다.

3. React의 동작 방식은 어떻게 되나요?

   React는 컴포넌트 기반으로 동작합니다. 컴포넌트는 애플리케이션의 독립적이고 재사용 가능한 코드 조각입니다. 각 컴포넌트는 자체 state와 props를 가지고 있습니다. React는 가상 DOM을 사용하여 변경된 부분만 실제 DOM에 반영합니다. 이를 통해 빠른 렌더링 속도를 보장합니다.

   
   

4. React의 주요 기능은 무엇인가요?

• JSX: JSX는 JavaScript 문법 확장으로 React와 함께 사용되어 사용자 인터페이스의 모양을 설명합니다.

• 컴포넌트: 컴포넌트는 React 애플리케이션의 구성 요소이며, 사용자 인터페이스를 독립적이고 재사용 가능한 부분으로 분할합니다.

• 가상 DOM: React는 메모리에 실제 DOM의 경량화된 표현인 가상 DOM을 유지 관리합니다. 객체의 상태가 변경되면 가상 DOM은 실제 DOM에서 해당 객체만 변경합니다.

• 단방향 데이터 바인딩: React의 단방향 데이터 바인딩은 모든 것을 모듈화하고 빠르게 유지합니다.

• 높은 성능: React는 변경된 컴포넌트만 업데이트하므로 매우 빠른 웹 애플리케이션을 만들 수 있습니다.

5. JSX란 무엇인가요?
   JSX는 JavaScript의 구문 확장입니다. React에서 사용자 인터페이스의 모양을 설명하는 데 사용됩니다. JSX를 사용하면 JavaScript 코드가 포함된 동일한 파일에서 HTML 구조를 작성할 수 있습니다.

6. 웹 브라우저가 JSX를 직접 읽을 수 있나요?

   웹 브라우저는 JSX를 직접 읽을 수 없습니다. 웹 브라우저는 일반 JS 객체만 읽도록 구축되었기 때문에 JSX는 일반 JavaScript 객체가 아닙니다. 웹 브라우저가 JSX 파일을 읽으려면 Babel을 사용하여 일반 JavaScript 객체로 변환해야 합니다.

   
   

7. 가상 DOM이란 무엇인가요?

   DOM은 Document Object Model을 나타냅니다. DOM은 HTML 문서를 논리 트리 구조로 표현합니다. 트리의 각 분기는 노드로 끝나고 각 노드에는 객체가 포함됩니다. React는 메모리에 실제 DOM의 경량화된 표현을 유지하는데, 이를 가상 DOM이라고 합니다. 객체의 상태가 변경되면 가상 DOM은 실제 DOM에서 해당 객체만 변경합니다.

   
   

8. Angular와 같은 다른 프레임워크 대신 React를 사용하는 이유는 무엇인가요?

• 동적 애플리케이션을 쉽게 만들 수 있음

• 가상 DOM을 사용하여 성능 향상

• 재사용 가능한 컴포넌트로 개발 시간 단축

• 단방향 데이터 흐름으로 디버깅이 쉬움

• 전용 도구로 쉽게 디버깅할 수 있음

9. ES6 표준과 ES5 표준의 차이점은 무엇인가요?

   exports vs export, require vs import 등 ES6 구문이 ES5 구문과 다른 몇 가지 사례가 있습니다.

   
   

10. React 앱을 어떻게 만드나요?

• NodeJS를 컴퓨터에 설치합니다. React 라이브러리를 포함한 많은 JavaScript 라이브러리가 포함된 npm이 필요하기 때문입니다.

• 명령 프롬프트나 터미널을 사용하여 create-react-app 패키지를 설치합니다.

• VS Code나 Sublime Text 같은 원하는 텍스트 편집기를 설치합니다.

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

    이벤트는 키 누름, 마우스 클릭 등 사용자나 시스템이 트리거할 수 있는 동작입니다. React 이벤트는 HTML에서는 소문자 대신 camelCase를 사용하여 이름이 지정됩니다. JSX에서는 HTML에서 문자열 대신 함수를 이벤트 핸들러로 전달합니다.

    
    

12. React에서 이벤트는 어떻게 생성하나요?

    간단하게는 JSX에서 이벤트 핸들러 지정하여 생성할 수 있습니다. 컴포넌트의 JSX 엘리먼트에 이벤트 핸들러를 지정하며, 핸들러 함수는 중괄호({})로 감싸줍니다. 직접 이벤트 핸들러 함수 정의할 수도 있는데, 컴포넌트 내부에 이벤트 핸들러 함수를 정의하고, 함수는 일반적으로 arrow function 또는 메서드로 정의됩니다. 이때, 이벤트 핸들러 함수는 이벤트 객체를 매개변수로 받습니다. 이벤트 객체를 통해 이벤트에 대한 추가 정보(예: 타겟 엘리먼트, 마우스 좌표 등)에 접근할 수 있습니다.

    
    

13. React에서 합성 이벤트(synthetic events)란 무엇인가요?

    합성 이벤트는 서로 다른 브라우저의 네이티브 이벤트에 대한 응답을 하나의 API로 결합하여 이벤트가 브라우저 간에 일관되도록 합니다. 이를 통해 애플리케이션이 실행 중인 브라우저에 관계없이 일관된 동작을 보장합니다. 여기서 preventDefault는 합성 이벤트입니다.

    
    

14. React에서 리스트가 어떻게 동작하는지 설명해주세요.

    React에서는 일반 JavaScript에서와 마찬가지로 리스트를 생성합니다. 리스트는 데이터를 순서대로 표시하며, map() 함수를 사용하여 리스트를 순회합니다.

    
    

15. 리스트에서 키(keys)를 사용해야 하는 이유는 무엇인가요?

    키는 리스트에서 매우 중요한데 그 이유는 다음과 같습니다:

    • 키는 고유 식별자로 리스트에서 어떤 항목이 변경, 추가 또는 제거되었는지 식별하는 데 사용됩니다.

    • 또한 어떤 컴포넌트가 재렌더링되어야 하는지 결정하는 데 도움이 되므로, 매번 모든 컴포넌트를 렌더링하는 대신 업데이트된 컴포넌트만 재렌더링하여 성능을 높일 수 있습니다.

16. React에서 코멘트는 어떻게 작성하나요?

    React에서 코멘트를 작성하는 방법은 두 가지가 있습니다:

• 한 줄 주석: // 로 시작

• 여러 줄 주석: /* 로 시작해서 */ 로 끝냄

  
  

17. React에서 화살표 함수란 무엇이고 어떻게 사용되나요?

    화살표 함수는 React에 함수를 작성하는 간단한 방법입니다. 화살표 함수를 사용할 때는 생성자 내부에서 'this'를 바인딩할 필요가 없습니다. 이는 React 콜백에서 'this' 사용으로 인한 버그를 방지합니다.

    
    

18. React와 React Native의 차이점은 무엇인가요?

React:

• 출시일: 2013년

• 플랫폼: 웹

• HTML 사용: 가능

• CSS 사용: 가능

• 사전 지식: JavaScript, HTML, CSS

React Native:

• 출시일: 2015년

• 플랫폼: 모바일(안드로이드, iOS)

• HTML 사용: 불가능

• CSS 사용: 불가능

• 사전 지식: React.js

  
  

19. React 컴포넌트란 무엇인가요?

    컴포넌트는 React 애플리케이션의 구성 요소이며, 하나의 앱은 일반적으로 여러 컴포넌트로 구성됩니다. 컴포넌트는 기본적으로 사용자 인터페이스의 일부입니다. 사용자 인터페이스를 독립적이고 재사용 가능한 부분으로 나눠서 별도로 처리할 수 있습니다.

React에는 두 가지 유형의 컴포넌트가 있습니다:

• 함수형 컴포넌트: 자체 state가 없고 렌더 메서드만 포함하므로 stateless 컴포넌트라고도 합니다. props를 다른 컴포넌트에서 데이터로 전달받을 수 있습니다.

• 클래스 컴포넌트: 자체 state를 보유하고 관리할 수 있으며, JSX를 반환하는 별도의 렌더 메서드가 있습니다. state를 가질 수 있으므로 Stateful 컴포넌트라고도 합니다.

20. React에서 render()의 용도는 무엇인가요?

    각 컴포넌트에는 render() 함수가 필요합니다. 이 함수는 컴포넌트에 표시할 HTML을 반환합니다. 둘 이상의 요소를 렌더링해야 하는 경우 모든 요소를 <div>, <form>과 같은 하나의 부모 태그 안에 넣어야 합니다.

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

    state는 컴포넌트의 데이터나 정보를 포함하는 React의 내장 객체입니다. 컴포넌트의 state는 시간이 지남에 따라 변경될 수 있으며, 변경될 때마다 컴포넌트가 다시 렌더링됩니다. state 변경은 사용자 작업이나 시스템 생성 이벤트에 대한 응답으로 발생할 수 있습니다. 컴포넌트의 동작과 렌더링 방식을 결정합니다.

    
    

22. React에서 state는 어떻게 구현하나요?

    React에서 state는 컴포넌트 내부에서 관리되는 상태 값으로, 시간에 따라 변할 수 있는 동적인 데이터를 저장하고 관리하는 데 사용됩니다.

    React 16.8 버전부터 도입된 Hooks API 중 하나인 useState 훅을 사용하여 함수형 컴포넌트에서 state를 구현할 수 있습니다. useState 훅은 state 변수와 해당 변수를 업데이트하는 setter 함수를 반환합니다.

    state 값을 업데이트하려면 setter 함수를 호출해야 하며, React는 자동으로 컴포넌트를 다시 렌더링하여 업데이트된 state 값을 반영합니다.

    state는 컴포넌트 내에서 필요한 데이터를 저장하고 조작하는 데 사용되며, 사용자 인터랙션, 서버 데이터, 타이머 등 다양한 요인에 의해 변경될 수 있습니다.

    React에서 state를 적절히 사용하면 동적이고 인터랙티브한 사용자 인터페이스를 구현할 수 있습니다. 컴포넌트 간에 state는 공유되지 않고 각 컴포넌트 내부에서 독립적으로 관리되므로, 필요한 최소한의 데이터만 state로 관리하는 것이 좋습니다.

    
    

23. 컴포넌트의 state는 어떻게 업데이트하나요?

    내장된 'setState()' 메서드를 사용하여 컴포넌트의 state를 업데이트할 수 있습니다.

    
    

24. React에서 props란 무엇인가요?

    Props는 Properties의 약어입니다. 속성 값을 저장하고 HTML 속성과 유사하게 작동하는 React 내장 객체입니다. Props는 한 컴포넌트에서 다른 컴포넌트로 데이터를 전달하는 방법을 제공합니다. Props는 함수에 인수가 전달되는 것과 동일한 방식으로 컴포넌트에 전달됩니다.

    
    

25. 컴포넌트 간에 props는 어떻게 전달하나요?

    부모 컴포넌트에서 자식 컴포넌트로 props를 전달할 때는 JSX 내에서 속성(attribute)의 형태로 전달합니다. 자식 컴포넌트에서는 함수의 매개변수를 통해 전달받은 props에 접근할 수 있습니다. 전달받은 props는 자식 컴포넌트 내에서 읽기 전용입니다. 자식 컴포넌트는 props를 직접 수정할 수 없고, 변경이 필요한 경우 부모 컴포넌트에서 state를 변경하고 새로운 props를 전달해야 합니다.

26. state와 props의 차이점은 무엇인가요?

state:

• 용도: 컴포넌트에 대한 정보 보유

• 변경 가능성: 변경 가능

• 읽기 전용: 변경될 수 있음

• 하위 컴포넌트: 하위 컴포넌트가 액세스할 수 없음

• Stateless 컴포넌트: state를 가질 수 없음

props:

• 용도: 다른 컴포넌트에 데이터를 전달하는 것을 허용

• 변경 가능성: 변경 불가능

• 읽기 전용: 읽기 전용

• 하위 컴포넌트: 하위 컴포넌트가 액세스할 수 있음

• Stateless 컴포넌트: props를 가질 수 있음

  
  

27. React에서 higher-order 컴포넌트란 무엇인가요?

    higher-order 컴포넌트는 다른 컴포넌트의 컨테이너 역할을 합니다. 이를 통해 컴포넌트를 단순하게 유지하고 재사용성을 높일 수 있습니다. 일반적으로 여러 컴포넌트가 공통 로직을 사용해야 할 때 사용됩니다.

    
    

28. 두 개 이상의 컴포넌트를 하나로 어떻게 임베드할 수 있나요?

    React에서 두 개 이상의 컴포넌트를 하나로 임베드하는 방법은 크게 두 가지가 있습니다.

    첫 번째는 부모 컴포넌트 안에 자식 컴포넌트들을 배치하는 것입니다. 부모 컴포넌트의 JSX 안에 자식 컴포넌트들을 적절히 배치하면 됩니다. 이때 자식 컴포넌트들은 props를 통해 부모로부터 필요한 데이터를 전달받을 수 있습니다.

    두 번째 방법은 합성 컴포넌트(Composite Component)를 사용하는 것입니다. 합성 컴포넌트는 여러 개의 컴포넌트를 조합하여 하나의 새로운 컴포넌트를 만드는 것을 말합니다. 이때 합성 컴포넌트 내부에서 자식 컴포넌트들을 적절히 배치하고, 필요한 props를 전달해주면 됩니다.

    이렇게 함으로써 코드의 재사용성을 높이고, 컴포넌트 간의 결합도를 낮출 수 있습니다. 또한 UI의 일관성을 유지하면서도 유연하게 구조를 변경할 수 있게 됩니다.

    
    

29. 클래스 컴포넌트와 함수형 컴포넌트의 차이점은 무엇인가요?

클래스 컴포넌트:

• state를 보유하고 관리할 수 있음

• stateless 컴포넌트에 비해 복잡함

• 모든 생명주기 메서드로 작업할 수 있음

• 재사용할 수 있음

함수형 컴포넌트:

• state를 보유하거나 관리할 수 없음

• 이해하기 쉬움

• 생명주기 메서드로 작동하지 않음

• 재사용할 수 없음

  
  

30. 컴포넌트의 생명주기 메서드를 설명해주세요.

• getInitialState(): 컴포넌트가 생성되기 전에 실행됩니다.

• componentDidMount(): 컴포넌트가 렌더링되어 DOM에 배치될 때 실행됩니다.

• shouldComponentUpdate(): 컴포넌트가 DOM에 대한 변경 사항을 결정할 때 호출되며 특정 조건에 따라 "true" 또는 "false" 값을 반환합니다.

• componentDidUpdate(): 렌더링 직후에 호출됩니다.

• componentWillUnmount(): 컴포넌트가 영구적으로 파괴되고 마운트 해제되기 직전에 호출됩니다.

31. Redux란 무엇인가요?

    Redux는 애플리케이션 상태를 관리하는 데 사용되는 오픈 소스 JavaScript 라이브러리입니다. React는 사용자 인터페이스를 구축하기 위해 Redux를 사용합니다. Redux는 JavaScript 애플리케이션을 위한 예측 가능한 상태 컨테이너로, 전체 애플리케이션의 상태 관리에 사용됩니다.

    
    

32. Redux의 구성 요소는 무엇인가요?

• Store: 애플리케이션의 상태를 보유합니다.

• Action: 저장소에 대한 정보의 출처입니다.

• Reducer: 저장소로 전송된 액션에 대한 응답으로 애플리케이션의 상태가 어떻게 변경되는지 지정합니다.

  
  

33. Flux란 무엇인가요?

    Flux는 Facebook이 웹 애플리케이션을 구축하기 위해 사용하는 애플리케이션 아키텍처입니다. 클라이언트 측 애플리케이션 내에서 복잡한 데이터를 처리하는 방법이며 React 애플리케이션에서 데이터 흐름을 관리합니다. 데이터의 단일 출처(저장소)가 있으며 특정 작업을 트리거하는 것이 저장소를 업데이트하는 유일한 방법입니다. 작업은 디스패처를 호출한 다음 저장소가 트리거되고 자체 데이터에 따라 업데이트됩니다. 디스패치가 트리거되고 저장소가 업데이트되면 변경 이벤트를 내보내 뷰가 그에 따라 다시 렌더링될 수 있습니다.

    
    

34. Redux는 Flux와 어떻게 다른가요?

Redux:

• Redux는 애플리케이션 상태를 관리하는 데 사용되는 오픈 소스 JavaScript 라이브러리

• 저장소의 상태는 불변

• 단일 저장소만 가질 수 있음

• Reducer 개념 사용

Flux:

• Flux는 아키텍처이며 프레임워크나 라이브러리가 아님

• 저장소의 상태는 변경 가능

• 여러 저장소를 가질 수 있음

• 디스패처 개념 사용

  
  

35. React Router란 무엇인가요?

    React Router는 React 위에 구축된 라우팅 라이브러리로, React 애플리케이션에서 경로를 생성하는 데 사용됩니다. 이는 가장 자주 묻는 React 인터뷰 질문 중 하나입니다.

36. React Router가 필요한 이유는 무엇인가요?

• 일관된 구조와 동작을 유지하고 단일 페이지 웹 애플리케이션을 개발하는 데 사용됩니다.

• React 애플리케이션에 여러 경로를 정의하여 단일 애플리케이션에서 여러 뷰를 구현할 수 있습니다.

  
  

37. React 라우팅은 기존 라우팅과 어떻게 다른가요?

React 라우팅:

• 단일 HTML 페이지

• 사용자는 동일한 파일에서 여러 뷰를 탐색함

• 단일 파일이므로 페이지가 새로 고쳐지지 않음

• 성능 향상

기존 라우팅:

• 각 뷰는 새로운 HTML 페이지

• 사용자는 각 뷰에 대해 여러 파일을 탐색함

• 사용자가 탐색할 때마다 페이지가 새로 고쳐짐

• 성능이 느림

  
  

38. React 라우팅은 어떻게 구현하나요?

    React에서 라우팅을 구현하기 위해 일반적으로 react-router-dom 라이브러리를 사용합니다. 주요 과정은 다음과 같습니다.

    1. react-router-dom 설치: npm이나 yarn을 통해 라이브러리를 설치합니다.

    2. index.js에서 BrowserRouter로 App 컴포넌트 감싸기: BrowserRouter는 HTML5의 History API를 사용하여 UI를 URL과 동기화합니다.

    3. App.js에서 Route 컴포넌트를 사용하여 경로 설정: Route 컴포넌트의 path prop에 경로를, component prop에는 렌더링할 컴포넌트를 지정합니다.

    4. Link 컴포넌트를 사용하여 다른 경로로 이동할 수 있는 링크 생성: Link 컴포넌트의 to prop에 이동할 경로를 설정합니다.

    5. 필요한 경우 파라미터나 쿼리 문자열을 사용하여 동적 라우팅 구현: URL 파라미터는 Route 경로에 콜론(:)을 사용하여 설정하고, useParams 훅으로 접근합니다. 쿼리 문자열은 location 객체의 search 속성을 통해 접근할 수 있습니다.

    
    

39. React에서 CSS 모듈을 사용하는 방법을 설명해주세요.

• CSS 모듈 파일은 .module.css 확장자로 생성됩니다.

• 모듈 파일 내부의 CSS는 해당 모듈을 가져온 컴포넌트에서만 사용할 수 있으므로, 컴포넌트 스타일링 시 이름 충돌이 발생하지 않습니다.

  
  

40. React 컴포넌트는 어떻게 스타일링하나요?

    React 컴포넌트를 스타일링하는 몇 가지 방법이 있습니다:

• 인라인 스타일링

• JavaScript 객체

• CSS 스타일시트

출처 : https://www.simplilearn.com/tutorials/reactjs-tutorial/reactjs-interview-questions