인터뷰에서 가장 많이 묻는 ReactJS 질문입니다.-JS 튜토리얼-php.cn

ReactJS 인터뷰 질문 및 답변

이 문서는 ReactJS 인터뷰 질문의 포괄적인 목록과 추가 학습을 위한 추가 리소스 링크를 제공합니다.

React란 무엇인가요? React는 주로 단일 페이지 애플리케이션용 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리입니다. 구성 요소 기반 아키텍처와 Virtual DOM을 사용한 효율적인 렌더링으로 유명합니다.
React를 사용하면 어떤 이점이 있나요? 구성 요소 재사용성, 향상된 성능(Virtual DOM), 학습 용이성(JSX), 대규모 커뮤니티 지원, 광범위한 도구 및 라이브러리 생태계 등의 장점이 있습니다.
React 사용 시 제한 사항은 무엇입니까? 제한 사항에는 복잡한 애플리케이션에 대한 가파른 학습 곡선, SEO 문제(완화 가능하지만), 대규모 프로젝트의 라우팅 및 상태 관리를 위한 추가 라이브러리의 필요성 등이 포함될 수 있습니다. .
React에서 useState()은 무엇인가요? useState()는 기능적 구성요소가 상태를 관리할 수 있게 해주는 React Hook입니다. 현재 상태 값과 이를 업데이트하는 함수가 포함된 배열을 반환합니다.
React의 키는 무엇인가요? 키는 목록에 렌더링되는 구성 요소의 하위 항목에 제공하는 특수 문자열 속성입니다. React는 키를 사용하여 변경, 추가 또는 제거된 항목을 식별합니다. 이는 효율적인 업데이트와 예상치 못한 동작을 방지하는 데 매우 중요합니다.
JSX란 무엇인가요? JSX(JavaScript XML)는 JavaScript 코드 내에서 HTML과 유사한 코드를 작성할 수 있게 해주는 JavaScript의 구문 확장입니다. React 코드를 더 읽기 쉽고 유지 관리하기 쉽게 만듭니다.
기능 구성 요소와 클래스 구성 요소의 차이점은 무엇인가요? 기능 구성 요소는 더 간단하며 상태 및 수명 주기 관리를 위해 Hook을 사용하는 경우가 많습니다. 클래스 구성 요소는 this을 사용하여 상태 및 수명 주기 메서드에 액세스하므로 더 복잡합니다. 기능적 구성 요소는 일반적으로 단순성과 가독성 때문에 선호됩니다.
Virtual DOM이란 무엇인가요? Virtual DOM은 실제 DOM을 메모리 내에서 경량으로 표현한 것입니다. React는 이를 사용하여 실제 DOM을 효율적으로 업데이트하고 직접적인 조작을 최소화하며 성능을 향상시킵니다.
React의 props는 무엇인가요? props(속성)는 상위 구성 요소에서 하위 구성 요소로 전달되는 데이터입니다. 변경 불가능합니다. 하위 구성 요소 내에서는 변경할 수 없습니다.
React 상태 및 props를 설명합니다. 상태는 구성 요소가 관리하는 내부 데이터로 시간이 지남에 따라 변경되어 구성 요소가 다시 렌더링될 수 있습니다. Prop은 컴포넌트에 전달되는 외부 데이터입니다. 구성요소 내에서는 읽기 전용입니다.
React의 부작용 유형에 대해 설명하세요. 부작용은 데이터 가져오기, DOM 직접 조작, 타이머 설정 등 구성 요소가 외부에 영향을 미치는 작업을 의미합니다. useEffect Hook
을 이용해 관리합니다.
React의 Prop Drilling이란 무엇인가요? Prop Drilling은 데이터가 필요한 컴포넌트에 도달하기 위해 컴포넌트 트리의 여러 수준의 컴포넌트를 통해 Prop을 전달하는 관행입니다. 코드를 유지 관리하기 어렵게 만들고 리팩토링하기 어렵게 만듭니다.
React Hooks란 무엇인가요? Hooks는 기능적 구성 요소 내에서 React 상태 및 수명 주기 기능을 '연결'할 수 있게 해주는 함수입니다. 예를 들면 useState, useEffect, useContext 등이 있습니다.
useEffect() Hook의 용도는 무엇인가요? useEffect는 기능적 구성 요소에서 Side Effect를 수행할 수 있는 Hook입니다. 여기에는 데이터 가져오기, 구독 및 DOM 수동 변경이 포함됩니다.
React에서 ref란 무엇인가요? ref는 DOM 요소나 구성 요소 인스턴스에 직접 액세스하는 메커니즘입니다. 입력 요소에 초점을 맞추거나 DOM을 직접 조작하는 등의 작업에 유용합니다.
React의 엄격 모드에 대해 설명하세요. 엄격 모드는 애플리케이션에서 잠재적인 문제를 강조하기 위한 도구입니다. 눈에 띄는 UI 변경 사항을 렌더링하지는 않지만 개발 중에 추가 확인 및 경고를 활성화합니다.
React에서 다시 렌더링을 방지하는 방법은 무엇입니까? 기술에는 React.memo를 사용하여 구성 요소를 메모하고, useCallback을 사용하여 콜백을 메모하고, 상태 업데이트를 최적화하여 불필요한 다시 렌더링을 방지하는 것이 포함됩니다.
React 앱 성능을 최적화하는 몇 가지 기술을 나열해 보세요. 기술에는 코드 분할, 지연 로딩, 메모, React.memo 사용 및 상태 업데이트 최적화가 포함됩니다.
React 구성 요소 간에 데이터를 전달하는 방법은 무엇입니까? 데이터는 props를 통해 전달되거나 콜백을 통해 전달되거나 전역 상태 관리를 위한 컨텍스트를 사용하여 전달될 수 있습니다.
고차 구성 요소란 무엇인가요? 고차 구성 요소(HOC)는 구성 요소를 인수로 사용하고 새로운 향상된 구성 요소를 반환하는 함수입니다. 컴포넌트 로직을 재사용하기 위한 패턴입니다.
구성 요소 수명 주기의 여러 단계는 무엇인가요? 클래스 구성 요소의 경우: 마운트, 업데이트 및 마운트 해제. 기능적 구성요소의 경우 Hook을 사용하여 수명주기를 관리합니다.
React Router란 무엇인가요? React Router는 React 애플리케이션에 클라이언트 측 라우팅을 추가하기 위한 라이브러리입니다. 여러 보기가 포함된 단일 페이지 애플리케이션을 만들 수 있습니다.
React의 조건부 렌더링에 대해 설명하세요. 조건부 렌더링은 특정 조건에 따라 다양한 UI 요소를 렌더링하는 기술입니다. 이는 if문, 삼항 연산자 또는 단락 평가
를 사용하여 달성할 수 있습니다.
React Router를 사용하여 형제 구성 요소 간에 데이터를 전달하는 방법은 무엇입니까? 형제 구성 요소는 일반적으로 직접 통신하지 않습니다. 대신 데이터는 일반적으로 상위 구성 요소로 전달된 다음 다른 형제 구성 요소로 전달됩니다. Context API도 사용할 수 있습니다.