20가지 기본 문제, 공부 돕기

처음 몇 주 동안 공부는 도전이었다.클래스나 기능 구성 요소를 사용할 때 도구를 사용하는 방법을 알아보세요.나는 여전히 React를 배우는 과정에서 기본적인 초보자 문제를 사용하는 것이 매우 도움이 된다는 것을 발견했다. 나는 매주 나 자신에게 물어볼 수 있다.이것은 내가 기본 원리를 이해하는 데 도움을 주는 좋은 방법이며, 게다가 중복은 추억을 더욱 쉽게 할 수 있다.나는 이번 주에 만난 내가 가장 좋아하는 자원을 사용했다.나는 문제와 답안, 그리고 내가 얻은 원본 링크를 발표할 것이다.나는 레드룩스나 훅스에 대해 깊이 토론하지 않을 것이며, 지금은 기본적인 흔한 문제만 토론할 것이다.내가 발전함에 따라 나는 반드시 더욱 복잡한 문제로 두 번째 부분을 쓸 것이다.
만약 당신도 React를 배우고 있다면, 당신은 매주 금요일에 이런 문제들로 자신에게 물어볼 수 있으며, 시간이 지날수록, 당신은 더욱 쉽게 답을 회상할 수 있을 것이다.네가 면접을 준비할 때, 그것들을 서둘러 다 읽기를 기다리지 마라.


질문에 대답하다

1) 반응이란 무엇인가

전면 Javascript 라이브러리

페이스북이 2011년 개발

구성 요소 기반 방법 따라

재사용 가능한 UI 구성 요소를 만들 수 있습니다

.

복잡한 대화형 네트워크 및 모바일 사용자 인터페이스 개발용

2015년에 개원하여 강력한 기초와 방대한 지역사회를 가지고 있다.

✨ Source link

2) 반응 특징

가상 Dom

사용

서버측 렌더링

단방향 데이터 흐름, 즉 단방향 데이터 귀속을 따른다.구성 요소 간의 React 데이터 흐름은 모 레벨에서 자 레벨까지만 일방적입니다.

재사용/조합 가능한 UI 구성 요소를 사용하여 뷰를 개발합니다.

✨ Source link - Edureka

3) React의 장단점
우세하다

구성 요소가 어떻게 렌더링되는지 쉽게 알 수 있습니다. 렌더링 함수만 보면 됩니다.

JSX는 구성 요소 코드를 쉽게 읽을 수 있도록 합니다.레이아웃이나 구성 요소가 어떻게 서로 삽입되거나 조합되는지도 쉽게 볼 수 있다.

서버에서 React를 렌더링할 수 있습니다.

그것은 테스트하기 쉬워요. 예를 들어jest와 같은 도구를 집적할 수도 있어요.

읽기 용이성을 보장하고 서비스 편의성을 높입니다.

모든 프레임 (Backbone.js, Angular.js) 에 React를 사용할 수 있습니다. 이것은 보기 층이기 때문입니다.

결점

이것은 보기 층일 뿐입니다. Ajax 요청, 이벤트 등에 코드를 삽입해야 합니다

도서관 자체가 상당히 크다.

학습 곡선이 가파르겠다.

✨ Source link - Stackoverflow

4) JSX란 무엇인가

JSX는 Javascript XML - 확장 가능한 태그 언어를 나타냅니다.

자바스크립트의 표현력과 HTML과 유사한 템플릿 문법을 이용한다.

HTML을 쉽게 이해할 수 있습니다.

얘는 튼튼해

JS 성능 향상

JSX 표현식은 가장 바깥쪽 요소만 있어야 합니다.

✨ Source link - Edureka

5) 가상 DOM이란?
가상 DOM(virtual DOM, VDOM)은 프로그래밍 개념으로 UI의 이상이나'가상'은 형식이 메모리에 저장되고 ReactDOM과 같은 라이브러리를 통해'진실'DOM과 동기화된다는 것을 나타낸다.이 과정을 화해라고 한다.
✨ Source - React Docs

6) 가상 Dom은 어떻게 작동합니까?

기본 데이터가 변경될 때마다 UI 전체가 가상 Dom으로 다시 표시됩니다.

그런 다음 이전 DOM 표현과 새 DOM 표현 간의 차이를 계산합니다.

계산이 완료되면 실제 DOM은 변경된 내용만 사용하여 업데이트됩니다.

✨ Source link - Edureka

7) 가상 DOM과 실제 DOM의 차이
가상 DOM
진정한 DOM
빠른 업데이트
느린 업데이트
HTML을 직접 업데이트할 수 없습니다.
HTML을 직접 업데이트할 수 있습니다.
JSX 요소가 나타나면 업데이트됩니다.
요소가 업데이트되면 새 DOM이 생성됩니다.
DOM 조종비 없음
비용이 많이 드는 DOM 작업
메모리 낭비 없음
너무 많은 메모리 낭비
✨ Source link - Edureka

8) 브라우저에서 JSX를 읽을 수 없는 이유

JSX는 일반적인 자바스크립트가 아니다

브라우저는 Javascript 객체만 읽을 수 있습니다.

JSX 파일은 브라우저에 도착하기 전에 JSX Transformer 링크 Babel에서 JS 객체로 변환됩니다.

✨ Source link - Edureka

9) React와 Angular의 차이점은 무엇입니까?
토픽
리액션
모서리의
1) 건물
MVC만 보기
전체 MVC
2) 렌더링
서버측 렌더링
클라이언트 렌더링
3) 돔
가상 DOM 사용
진정한 DOM 사용
4) 데이터 바인딩
단방향 데이터 바인딩
양방향 데이터 바인딩
5)가시제거
컴파일 시 디버깅
런타임 디버깅
6) 저자
페이스북
구글
✨ Source link - Edureka

10) "React에서 모든 것은 하나의 구성 요소입니다."설명해 주시겠어요?

첫째, 구성 요소는 React 사용자 인터페이스의 구축 블록이다.

구성 요소를 사용하면 UI를 독립적이고 재사용 가능한 섹션으로 분할하고 각 섹션을 개별적으로 고려할 수 있습니다.

개념적으로 구성 요소는 JavaScript 함수와 유사합니다.이들은 임의의 입력 ("도구"라고 함) 을 받아들여 화면에 표시될 내용을 설명하는 React 요소를 되돌려줍니다.

✨ Source - React Docs

11) 렌더링 함수의 용도 이해

사용자 인터페이스 업데이트를 위한 렌더링 기능

기본 DOM 구성 요소의 표현인 React 요소를 반환합니다.

루트 DOM 노드에 React 요소를 표시하려면 두 요소를 모두 ReactDOM에 전달합니다.render()

const title = <h1>Hello, world</h1>;
ReactDOM.render(title, document.getElementById('root'));

✨ Source link - React Docs

12) 리액션의 아이템은 무엇인가

아이템은 구성 요소의 속성을 나타냅니다.

는 순수 i로 변하지 않는다.

항상 모 어셈블리에서 서브어셈블리로 전달됩니다.

동적 데이터 렌더링용

✨ Source link - Edureka

13) 반응 중의 상태가 무엇인가

상태는 React의 내장 대상이며 구성 요소가 데이터를 만들고 관리하는 데 도움을 줄 수 있습니다.

어셈블리의 렌더링 및 동작을 결정합니다.

동적 및 대화식 구성 요소 만들기

이것을 통과할 수 있습니다.state()

이 업데이트 상태를 사용할 수 있습니다.setState()

✨ Source link - Edureka

14) React의 이벤트

이벤트는 특정 동작(예를 들어 마우스 클릭, 마우스 정지, 버튼 등)이 반응을 촉발한 결과이다.

React의 이벤트는 vanilla Javascript 이벤트와 유사합니다.

15) React에서 모듈식 코드

이것은 코드를 독립된 모듈이나 파일에 넣는 것을 의미할 뿐이다.

가져오기와 내보내기 방법을 사용할 수 있고 서로 다른 구성 요소에서 온 구성 요소를 사용할 수 있습니다.

16) 제어된 구성 요소와 비제어된 구성 요소 간의 차이
관리 컴포넌트
비관리 부품
자신의 상태를 유지하지 마라
자신의 상태를 유지하다.
{데이터는 부모 구성 요소에 의해 제어됨
DOM에서 데이터 제어
아이템을 통해 현재 값을 획득하고 리셋을 통해 변경 통지
REF가 현재 값을 가져옵니다.
✨ Source link - Edureka

17) 고급 구성 요소는 무엇입니까?

다른 구성 요소를 패키지하는 사용자 정의 구성 요소입니다.

동적으로 제공되는 서브어셈블리를 수락합니다.

는 순함수다.

✨ Source link - Edureka

18) React 가운데 키의 의미는 무엇입니까?

고유한 가상 DOM 요소와 구동 UI에 해당하는 데이터를 식별합니다.

기존 DOM 요소를 재확보하여 렌더링을 최적화합니다.

키는 고유한 숫자 또는 문자열이어야 합니다.

애플리케이션 성능 향상

✨ Source link - Edureka

19) React 태그 요소 사용 방법
HTML에서처럼 사용하지 않고 for="" 속성을 사용합니다.

<label htmlFor = {'name'}> </label>
<input type={'text} id={'name'}/> 

20) React에서 화살표 함수를 사용하는 이유

화살표가 부모 어셈블리를 가리키기를 원할 때 화살표 함수가 유용합니다.

화살표 기능은 그 자체의 것이 아니다htmlFor="".

this는 폐쇄된 범위에서 계승된다.

요컨대
나는 이미 문제와 답안을 얻는 자원을 연결했다.너는 그것들로 네가 이해하지 못하거나 처음으로 대답하지 못하는 문제를 깊이 있게 탐구할 수 있다.매일 끊임없이 세 가지 질문을 하며 당신의 여정이 어떻게 진행되고 있는지 보세요.구글 검색을 사용하지 않고 상세하게 설명할 수 있을수록, 구글 검색을 파악할 수 있다.

만약 이 게시물이 매우 유용하다고 생각한다면, React JS를 공부하는 동갑내기나 초보자와 공유할 수 있다. 그들은 이러한 문제들이 그들의 여정에 매우 유용하다는 것을 발견할 수 있을 것이다.너도 나 커피 사줄 수 있어.🙂