15 솔루션과의 인터뷰 질문에 반응합니다

React의 인기는 쇠약 한 조짐을 보이지 않으며, 개발자에 대한 수요는 여전히 전 세계의 많은 도시에서 공급을 능가합니다. 경험이 부족한 개발자 (또는 한동안 구직 시장에서 벗어난 사람들)에게 인터뷰 단계에서 지식을 보여주는 것은 어려울 수 있습니다.

. 이 기사에서는 RECT를 효과적으로 이해하고 효과적으로 작업하는 데 핵심적인 지식을 다루는 15 가지 질문을 살펴 보겠습니다. 각 질문에 대해 답을 요약하고 추가 자료에 대한 링크를 제공합니다. 키 테이크 아웃

이 기사는 가상 DOM, JSX, 클래스 및 기능 구성 요소, 상태 및 소품과 같은 RECT를 효과적으로 이해하고 효과적으로 작업하는 데있어 다양한 지식을 다루는 15 개의 일반적인 RECT 인터뷰 질문에 대한 포괄적 인 목록을 제공합니다. 후크 등 반응 이 기사는 클래스와 기능 구성 요소의 차이, 렌더링 컬렉션에서 키의 역할, 상태와 소품의 차이점을 이해하는 것의 중요성을 강조합니다. 이 기사는 또한 Prop Drilling, React Context, Redux, React Application 스타일링을위한 다양한 접근 방식 및 제어 및 제어되지 않은 구성 요소의 개념과 같은 고급 주제를 다룹니다. 이 기사는 React Hooks의 장점을 강조하고 클래스 기반 구성 요소의 필요성을 제거하고 논리를 더 쉽게 재사용 할 수 있으며보다 읽기 쉽고 테스트 가능한 코드로 이어짐으로써 결론을 내립니다.

1. 가상 Dom은 무엇입니까?

답변 가상 DOM은 애플리케이션의 UI를 구성하는 실제 HTML 요소의 메모리 표현입니다. 구성 요소가 재 렌더링되면 가상 DOM은 적용 할 업데이트 목록을 작성하기 위해 DOM 모델과 변경을 비교합니다. 주요 장점은 큰 덩어리를 다시 렌더링하지 않고 실제 DOM을 최소한으로 변경하는 것만 매우 효율적이라는 것입니다.

추가 읽기

가상 dom 이해 가상 Dom은

를 설명했습니다

2. jsx 란 무엇입니까?

답변 JSX는 html처럼 보이는 코드를 작성할 수있는 JavaScript 구문으로 확장됩니다. 정기적 인 JavaScript 함수 호출로 컴파일하여 구성 요소에 대한 마크 업을 만드는 더 좋은 방법을 제공합니다. 이 jsx를 가져 가십시오 :

는 다음 JavaScript로 번역됩니다

<span><span><span><div</span> className<span>="sidebar"</span> /></span>
</span>

추가 읽기

jsx 소개 jsx 깊이

3. 클래스 구성 요소와 기능적 구성 요소의 차이점은 무엇입니까?

답변 반응 16.8 (후크 소개) 이전에 클래스 기반 구성 요소를 사용하여 내부 상태를 유지하는 데 필요한 구성 요소를 만들거나 수명주기 방법 (예 : ComponentDidMount 및 thittComponentUpdate)을 사용했습니다. 클래스 기반 구성 요소는 React의 구성 요소 클래스를 확장하고 최소한 Render () 메소드를 구현하는 ES6 클래스입니다. <: :> 클래스 구성 요소 :

기능성 구성 요소는 상태가없는 상태이며 (다시, . 기능 구성 요소 :

참고 : 반응 16.8에 후크의 도입은 이러한 차이가 더 이상 적용되지 않음을 의미합니다 (질문 14 및 15 참조).

추가 읽기

반응의 기능적 구성 요소 vs 클래스 구성 요소 반응 의 기능적 대 클래스 경적

<span>React.createElement(
</span>  <span>'div',
</span>  <span>{className: 'sidebar'}
</span><span>)
</span>

4. 키는 무엇입니까?

답변 RECT에서 컬렉션을 렌더링 할 때 각각의 반복 요소에 키를 추가하는 것이 요소와 데이터 간의 연관성을 추적하는 데 도움이되는 것이 중요합니다. 키는 고유 한 ID, 이상적으로는 UUID 또는 컬렉션 항목의 다른 고유 한 문자열이어야합니다.

키를 사용하지 않거나 인덱스를 키로 사용하지 않으면 컬렉션에서 항목을 추가하고 제거 할 때 이상한 동작이 발생할 수 있습니다.

<span>class Welcome extends React<span>.Component</span> {
</span>  <span>render() {
</span>    <span>return <h1>Hello, {this.props.name}</h1>;
</span>  <span>}
</span><span>}
</span>

추가 읽기

목록 및 키 반응의 주요 소품 이해

5. 상태와 소품의 차이점은 무엇입니까?

답변 소품은 부모로부터 구성 요소로 전달되는 데이터입니다. 그것들은 돌연변이되어서는 안되며 오히려 다른 값을 계산하는 데 표시되거나 사용됩니다. State는 구성 요소의 수명 동안 수정 될 수있는 구성 요소의 내부 데이터이며, 렌즈 사이에 유지됩니다.

추가 읽기
• 소품 대 상태
6. 직접 돌연변이 상태 대신 SetState를 호출하는 이유는 무엇입니까?

답변 구성 요소의 상태를 직접 돌연변이하려고하면 React는 구성 요소를 다시 렌더링해야한다는 것을 알 수 없습니다. setState () 메소드를 사용하여 React는 구성 요소의 UI를 업데이트 할 수 있습니다.

보너스 보너스로서, 상태 업데이트가 어떻게 동시에 보장되지 않는지에 대해서도 이야기 할 수도 있습니다. 다른 상태 (또는 소품)를 기반으로 구성 요소의 상태를 업데이트 해야하는 경우 상태와 소품을 두 가지 인수로 사용하는 setstate ()에 함수를 전달하십시오.

<span><span><span><div</span> className<span>="sidebar"</span> /></span>
</span>

추가 읽기

상태를 올바르게 사용하는

• 7. 소품으로 전달 된 값의 유형을 어떻게 제한하거나, 필요로합니까?

답변 구성 요소의 소품을 입력하려면 Prop-Types 패키지 (이전에 15.5 이전에 React의 일부로 포함)를 사용하여 예상되는 값의 유형과 소품이 필요한지 여부를 선언 할 수 있습니다.

추가 읽기

proptypes 와 함께 타이 테크링

8. 소품 시추는 무엇이며 어떻게 피할 수 있습니까?

<span>React.createElement(
</span>  <span>'div',
</span>  <span>{className: 'sidebar'}
</span><span>)
</span>

답변 PROP 드릴링은 부모 구성 요소에서 계층 구조에서 낮은 구성 요소로 데이터를 전달해야 할 때 발생하는 일입니다. > 때때로 구성 요소를 리팩토링하고 조기에 작은 구성 요소를 작은 구성 요소로 분해하지 않고 공통 상태를 가장 가까운 일반적인 부모로 유지함으로써 때때로 제안 된 드릴링을 피할 수 있습니다. 구성 요소 트리에서 깊고 멀리 떨어진 구성 요소간에 상태를 공유 해야하는 경우 React의 컨텍스트 API 또는 Redux와 같은 전용 상태 관리 라이브러리를 사용할 수 있습니다.

추가 읽기

PROP 드릴링

• 9. 반응 컨텍스트 란 무엇입니까?

답변 컨텍스트 API는 반응에 의해 제공되어 앱 내 여러 구성 요소간에 상태 공유 문제를 해결하기 위해 제공됩니다. 컨텍스트가 도입되기 전에 유일한 옵션은 Redux와 같은 별도의 주 관리 라이브러리를 가져 오는 것이 었습니다. 그러나 많은 개발자들은 Redux가 특히 소규모 응용 프로그램에 대해 많은 불필요한 복잡성을 소개한다고 생각합니다.

추가 읽기

컨텍스트 (반응 문서) Redux를 React 후크 및 컨텍스트 API 로 바꾸는 방법

10. Redux는 무엇입니까?

답변 redux는 컨텍스트 API가 존재하기 전에 생성 된 RECT를위한 타사 국가 관리 라이브러리입니다. 매장이라고하는 상태 컨테이너의 개념을 기반으로 한 구성 요소는 소품으로부터 데이터를 수신 할 수 있습니다. 매장을 업데이트하는 유일한 방법은 작업을 매장에 파견하는 것입니다. 리소셔는 동작과 현재 상태를 수신하고 새로운 상태를 반환하여 가입 구성 요소를 트리거하여 재 렌더링합니다.

추가 읽기

redux로 시작하는 redux 로의 깊은 다이빙 11. React Application 스타일링을위한 가장 일반적인 접근법은 무엇입니까?

답변 반응 구성 요소 스타일링에는 각각 장단점이 있습니다. 언급해야 할 주요 사항은 다음과 같습니다.

인라인 스타일링 : 프로토 타이핑에 적합하지만 제한 사항이 있습니다 (예 : 의사 클래스 스타일 없음) 클래스 기반 CSS 스타일 : 인라인 스타일보다 성능이 뛰어나고 React를 사용하는 새로운 개발자에게 친숙한 CSS-in-JS 스타일 : 구성 요소 내에서 JavaScript로 선언 할 수있는 다양한 라이브러리가 있습니다.
• 추가 읽기
반응 구성 요소를 스타일링하는 방법

12. 제어되지 않은 구성 요소와 제어되지 않은 구성 요소의 차이점은 무엇입니까?

답변 html 문서에서 많은 양식 요소 (예 : , , <input>)는 자신의 상태를 유지합니다. 통제되지 않은 구성 요소는 DOM을 이러한 입력 상태의 진실의 원천으로 취급합니다. 제어 된 구성 요소에서 내부 상태는 요소 값을 추적하는 데 사용됩니다. 입력의 값이 변경되면 입력을 다시 렌더링합니다. <ul> <oll> 통제되지 않은 구성 요소는 비 반응 코드와 통합 할 때 유용 할 수 있습니다 (예 : 일부 jQuery 양식 플러그인을 지원 해야하는 경우). <li> 추가 읽기 </li> <s> 제어 대 통제되지 않은 입력 <on> 제어 구성 요소 (React Docs) <oll> 통제되지 않은 구성 요소 (반응 문서) </oll></on></s></oll> </ul> <h2> 13. 수명주기 방법은 무엇입니까? </h2> <h3> 답변 <on> 클래스 기반 구성 요소는 수명주기의 특정 지점에서 호출되는 특수 메소드 (DOM에 렌더링) 및 마운트되지 않을 때와 같은 특수 메소드를 선언 할 수 있습니다. 예를 들어, 구성 요소가 필요한 것들을 설정하고 분해하는 데 유용합니다. 예를 들어 와 같은 타이머를 설정하거나 브라우저 이벤트에 바인딩하는 데 유용합니다. <ec> 다음 수명주기 방법은 구성 요소에서 구현할 수 있습니다. </ec></on> </h3> <ill ill> componentwillmount : 구성 요소가 생성 된 후 호출되었지만 dom으로 렌더링되기 전에 <id> ComponentDidMount : 첫 번째 렌더 후 호출; 구성 요소의 DOM 요소를 사용할 수 있습니다 <ill ill> componentwillReceiveProps : 소품이 업데이트 될 때 호출 <onent> whildComponentUpdate : 새로운 소품이 접수되면이 방법은 재 러너가 성능을 최적화하는 것을 방지 할 수 있습니다 <ill ill> componentWillupdate : 새 소품이 수신 될 때 호출 및 <h3> whildComponentUpdate를 반환합니다. <id> componentDidupdate : 구성 요소가 를 업데이트 한 후 호출됩니다 <ill> 구성 요소 willUnmount : 구성 요소가 DOM에서 제거되기 전에 호출되어 이벤트 리스너와 같은 물건을 정리할 수 있습니다. </ill></id> </h3> <with> 기능성 구성 요소를 처리 할 때 사용률 후크를 사용하여 수명주기 동작을 복제 할 수 있습니다. <ul> 추가 읽기 <li> <ec> 반응 수명주기 방법 다이어그램 </ec> </li> <lif> 구성 요소 수명주기 api <li> </li> <li> 14. 반응 후크 란 무엇입니까? </li> </lif> </ul> 답변 <reac> 후크는 클래스 기반 구성 요소 (즉, 내부 상태 및 수명주기 방법)의 장점을 기능 구성 요소로 가져 오려는 React의 시도입니다.<h3> 추가 읽기 </h3> <hook> 5 분 안에 반응 후크를 배우십시오 <s> 반응 후크 : 시작하고 자신만의 구축 방법 <ul> <li> </li> 15. React 후크의 장점은 무엇입니까? <li> </li> 답변 <st> 반응 할 후크를 도입함으로써 몇 가지 명시된 이점이 있습니다. </st> </ul> <the> 클래스 기반 구성 요소, 수명주기 후크 및이 키워드 Shenanigans의 필요성 제거 <to> 공통 기능을 사용자 정의 후크로 추상화하여 로직을 더 쉽게 재사용 할 수 있도록합니다. 구성 요소 자체에서 논리를 분리 할 수있어 더 읽기 쉽고 테스트 가능한 코드 <h2> </h2> 추가 읽기 <h3> <t> 반응 후크의 이점 <s> 반응 후크 - 짧은 재사용 가능한 논리 접근법과의 장점과 비교 </s><p> 포장 </p> <means> 포괄적 인 목록 (React가 끊임없이 진화하고 있음)은 아니지만 이러한 질문은 많은 근거를 다룹니다. 이러한 주제를 이해하면 가장 최근의 변경 사항과 함께 도서관에 대한 좋은 실무 지식을 제공합니다. 제안 된 추가 독서를 따르면 이해를 강화하는 데 도움이되므로 심층적 인 지식을 보여줄 수 있습니다. <ul> <following> 우리는 인터뷰 코드 연습을 반응하기위한 가이드를 따라갈 것입니다. 가까운 시일 내에 주시하십시오. <li>. 행운을 빕니다! </li> 반응 인터뷰 준비 > FAQ React 개발자 면접을 어떻게 준비해야합니까? <a> React 개발자 면접을 준비하기 위해 REACT의 핵심 개념을 연구하고 RECT와 관련된 연습 코딩 연습, React 프로젝트 포트폴리오를 검토하며 State Management, Component 라이프 사이클 및 Redux 또는 Redux 또는 관련 기술에 대한 경험을 논의 할 준비가되어 있습니다. 반응 라우터. <li> </li> 인터뷰 전에 회사와 개발 요구를 연구하는 가장 좋은 방법은 무엇입니까? <by> 웹 사이트를 방문하고 웹 응용 프로그램이나 프로젝트를 검토하고 기술 스택에서 React가 어떻게 사용되는지 이해하여 회사를 연구하십시오. 그들의 지식을 그들의 특정 요구에 맞게 조정하고 그들의 반응 기반 프로젝트에 기여한 것에 대한 열정을 보여주십시오. </by></a></following> </ul> 인터뷰를하는 일에 이력서를 어떻게 조정해야합니까? <res> RECT 개발과 관련된 특정 프로젝트, 기술 및 업적을 포함하여 React에 대한 귀하의 경험을 강조하여 이력서를 조정하십시오. RECT 구성 요소, 상태 관리 및 관련 라이브러리에 대한 지식을 강조하십시오. <h3> 일반적인 React 특정 인터뷰 질문은 무엇입니까? <interview> 일반적인 React 인터뷰 질문은“React 구성 요소 수명주기 설명”,“React에서 상태를 어떻게 관리합니까?”및“React Hooks 사용의 이점은 무엇입니까?”</interview> </h3>입니다. React 개발과 관련된 기술적 질문을 어떻게 효과적으로 준비 할 수 있습니까? <exerc> 건물 구성 요소, 상태 관리 및 소품 및 컨텍스트 작업과 같은 RECT와 관련된 코딩 연습을 연습합니다. Virtual DOM 및 구성 요소 재사용 성과 같은 React 개념에 익숙해 지십시오. <h3> 인터뷰 중에 React에 대한 숙련도를 어떻게 입증 할 수 있습니까? <reac>는 실제 프로젝트에 대한 경험을 논의하고, 성능을 최적화하는 방법을 설명하고, 구축 한 복잡한 구성 요소의 예를 공유함으로써 React 기술을 보여줍니다. 국가 관리 및 구성 요소 아키텍처에 대한 귀하의 접근 방식을 설명 할 준비를하십시오. </reac> </h3> 인터뷰 중에 React의 구성 요소 수명주기 이해의 중요성은 무엇입니까? <t> 반응 성분 수명주기 이해는 구성 요소 동작 및 상태를 효율적으로 관리하는 데 필수적입니다. 수명주기 방법을 설명하고 실제 시나리오에서 사용할 때를 설명 할 준비를하십시오. <p> W </p> 모자는 React 개발자 인터뷰에서 피해야 할 몇 가지 일반적인 실수입니까? <include> 일반적인 실수에는 프로젝트를 적절하게 설명하지 못하고 회사 나 역할에 대한 질문을하지 않고 React 기본 사항에 대한 지식 부족을 보여줍니다. 철저한 준비와 사려 깊은 의사 소통으로 이러한 함정을 피하십시오. <h3></h3></include></t></exerc></res></means></t> </h3></to></the></s></hook></reac></with></ill></onent></ill></id></ill>

위 내용은 15 솔루션과의 인터뷰 질문에 반응합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!