>  기사  >  웹 프론트엔드  >  (컬렉션) React에서 흔히 볼 수 있는 면접 질문 소개

(컬렉션) React에서 흔히 볼 수 있는 면접 질문 소개

不言
不言앞으로
2018-10-22 17:35:021810검색

이 기사는 React에서 자주 묻는 질문을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

다음은 React에 대해 일반적으로 사용되는 면접 질문 목록입니다.

면접관이든 채용 담당자이든 다음 질문을 참고할 수 있습니다.

북마크에 추가하세요

React의 작동 방식

React는 가상 DOM(가상 DOM)을 만듭니다. 구성 요소의 상태가 변경되면 React는 먼저 "diffing" 알고리즘을 통해 가상 DOM의 변경 사항을 표시하고 두 번째 단계는 조정이며 DOM은 diff 결과로 업데이트됩니다.

React를 사용하면 어떤 장점이 있나요?

렌더링 기능만 봐도 컴포넌트가 어떻게 렌더링되는지 쉽게 알 수 있습니다

JSX의 도입으로 컴포넌트의 코드를 더 읽기 쉽고 레이아웃을 더 쉽게 이해할 수 있습니다. 또는 구성 요소가 서로 참조하는 방식

서버 측 렌더링을 지원하여 SEO와 성능을 향상할 수 있습니다

테스트가 쉽습니다

React는 뷰 레이어에만 초점을 맞추기 때문에 다른 프레임워크(예: Backbone.js, Angular.js) 함께 사용

Presentational 컴포넌트와 Container 컴포넌트의 차이점은 무엇인가요?

Presentational 컴포넌트는 컴포넌트의 모양에 관심이 있습니다. 디스플레이는 구체적으로 props를 통해 데이터와 콜백을 허용하고 자체 상태를 거의 갖지 않지만 디스플레이 구성 요소에 자체 상태가 있는 경우 일반적으로 데이터 상태보다는 UI 상태에만 관심을 갖습니다.

컨테이너 구성 요소는 구성 요소가 작동하는 방식에 더 관심이 있습니다. 컨테이너 구성 요소는 프레젠테이션 구성 요소 또는 Flux actions를 호출하고 이를 프레젠테이션 구성 요소에 대한 콜백으로 제공하는 기타 컨테이너 구성 요소에 데이터와 동작을 제공합니다. 컨테이너 구성 요소는 다른 구성 요소의 데이터 소스이기 때문에 상태를 유지하는 경우가 많습니다.

클래스 구성 요소와 기능 구성 요소의 차이점은 무엇인가요?

클래스 구성 요소를 사용하면 구성 요소 자체의 상태 및 수명 주기 후크와 같은 추가 기능을 사용할 수 있을 뿐만 아니라 구성 요소가 스토어에 직접 액세스할 수 있습니다. 그리고 상태 유지

컴포넌트가 props만 받고 컴포넌트 자체를 페이지에 렌더링하는 경우 해당 컴포넌트는 '상태 비저장 컴포넌트'이며 순수 함수를 사용하여 이러한 컴포넌트를 만들 수 있습니다. 이런 종류의 컴포넌트를 덤(Dumb) 컴포넌트 또는 디스플레이 컴포넌트라고도 합니다. 상태와 소품의 차이점은 무엇입니까? 상태는 컴포넌트를 로드할 때 필요한 데이터에 대한 기본값입니다. 상태는 시간이 지남에 따라 변경될 수 있지만 대부분 사용자 이벤트 동작의 결과입니다.

Props(프로퍼티의 약어)는 컴포넌트의 구성입니다. Prop은 상위 구성 요소에서 하위 구성 요소로 전달되며 하위 구성 요소에 관한 한 Prop은 변경할 수 없습니다. 컴포넌트는 자신의 props를 변경할 수 없지만 하위 컴포넌트의 props를 하나로 묶을 수 있습니다(통합 관리). Prop은 단순한 데이터가 아닙니다. 콜백 함수도 Prop을 통해 전달될 수 있습니다.

(컴포넌트) 라이프 사이클 방법의 차이점을 지적하세요.

comComponentWillMount - 주로 루트 컴포넌트의 애플리케이션 구성에 사용됩니다.

comComponentDidMount - 여기에서 DOM 없이는 수행할 수 없는 모든 구성을 완료하고 모든 구성을 시작할 수 있습니다. 필수 데이터, 이벤트 수신을 설정해야 하는 경우 여기에서 완료할 수도 있습니다

comComponentWillReceiveProps - 이 주기적 함수는 특정 prop 변경으로 인한 상태 전환에 작용합니다

shouldComponentUpdate - 과도한 렌더링이 걱정되는 경우 구성 요소 shouldComponentUpdate는 성능을 향상시키는 방법입니다. 왜냐하면 구성 요소가 새 prop을 받으면 다시 렌더링되는 것을 방지할 수 있기 때문입니다. shouldComponentUpdate는 구성 요소를 다시 렌더링해야 하는지 여부를 결정하기 위해 부울 값을 반환해야 합니다.

comComponentWillUpdate - 거의 사용되지 않습니다. 구성 요소의 componentWillReceiveProps 및 shouldComponentUpdate를 대체하는 데 사용할 수 있습니다(그러나 이전 prop에는 액세스할 수 없음)

comComponentDidUpdate - 종종 DOM을 업데이트하고 prop 또는 상태 변경에 응답하는 데 사용됩니다

comComponentWillUnmount - 여기에서 네트워크 요청을 취소할 수 있습니다. 또는 모든 구성요소 관련 이벤트 리스너

를 제거하세요.

React 구성 요소에서 Ajax 요청이 시작되어야 하는 위치

React 구성 요소에서 네트워크 요청은 componentDidMount에서 시작되어야 합니다. 이 메서드는 구성 요소가 처음으로 "마운트"(DOM에 추가)될 때 실행되며 구성 요소의 수명 주기에서 한 번만 실행됩니다. 더 중요한 것은 구성요소가 마운트되기 전에는 보장할 수 없다는 것입니다. Ajax 요청이 완료되었다면 마운트 해제된 구성요소에서 setState를 호출하려고 시도 중이라는 뜻이며 이는 작동하지 않습니다. componentDidMount에서 네트워크 요청을 하면 업데이트할 구성 요소가 있는지 확인됩니다.

제어 구성 요소란 무엇입니까

HTML에서 ,