React 시작 : 초보자 가이드

개발 업계에서 인기있는 JavaScript 라이브러리 인 React는 대화식 사용자 인터페이스를 구축하는 프로세스를 단순화하며 애플리케이션 범위는 웹 페이지, 모바일 터미널 및 데스크톱 플랫폼을 포함합니다. Netflix 및 Airbnb와 같은 거인을 포함한 전 세계의 많은 회사들이 React를 사용하고 있습니다.

이 안내서는 반응을 신속하게 시작하고 핵심 개념을 설명하게됩니다. 우리는 React App 도구를 사용하여 프로젝트를 신속하게 구축하고 점차 간단한 React 응용 프로그램을 구축합니다. 연구 후, 당신은 React의 기본 사항을 마스터하고 추가 연구를 준비 할 것입니다.

예방 조치 React를 학습하기 전에 HTML, CSS 및 JavaScript에 대한 기본 지식을 갖는 것이 가장 좋습니다. Node.js 및 NPM 패키지 관리자를 이해하면 학습에 도움이 될 수 있습니다.

이 튜토리얼을 사용하려면 컴퓨터에 노드 및 NPM을 설치해야합니다. Node.js 다운로드 페이지에 액세스하려면 필요한 버전을 다운로드 할 수 있습니다 (NPM은 노드와 번들). 또는 버전 관리자를 사용하여 노드를 설치하려면 자습서를 참조 할 수 있습니다.

키 포인트

React는 사용자 인터페이스 구축에 중점을 둔 JavaScript 라이브러리이며 Netflix 및 AirBnB와 같은 회사에서 널리 사용됩니다.

RECT를 배우기 전에 HTML, CSS, JavaScript, Node.js 및 NPM에 대한 기본 지식이 필요합니다.

React Applications는 재사용 가능한 구성 요소를 중심으로 구축되며, 클래스 기반 또는 기능 기반이 될 수 있으며, 이는 후크의 출현으로 인해 점점 더 인기를 얻고 있습니다.

react의 가상 DOM은 UI 구성 요소 상태의 변화에 ​​따라 HTML DOM을 효율적으로 업데이트하여 성능을 향상시킵니다.

JSX는 REACT에 사용되는 구문 확장자로, 개발 경험과 가독성을 향상시키기 위해 JavaScript 파일에 HTML과 같은 코드를 작성할 수 있습니다.

반응 구성 요소는 인라인 스타일 또는 외부 CSS를 사용하여 직접 스타일링 할 수 있습니다.

반응은 무엇입니까?
• React는 UI 구성 요소를 구축하기위한 JavaScript 라이브러리입니다. Angular 또는 VUE와 같은보다 완전한 프레임 워크와 달리 React는 뷰 레이어 만 처리하므로 라우팅, 상태 관리 등을 처리하려면 다른 라이브러리가 필요합니다. 이 안내서는 REACT의 상자 외 기능에 중점을 둘 것입니다.
반응 응용 프로그램은 서로 상호 작용할 수있는 재사용 가능한 UI 구성 요소를 사용하여 구축됩니다. 반응 구성 요소는 클래스 기반 구성 요소 또는 소위 기능 구성 요소 일 수 있습니다. 클래스 기반 구성 요소는 ES6 클래스를 사용하여 정의되며 기능 구성 요소는 기본 JavaScript 함수입니다. 이러한 기능은 일반적으로 화살표 기능을 사용하여 정의되지만 기능 키워드도 사용할 수 있습니다. 클래스 기반 구성 요소는 일부 JSX (Rectt Elements를 생성하기 위해 일반 JavaScript 로의 반응 확장)를 반환하는 렌더링 함수를 구현하는 반면 기능 구성 요소는 JSX를 직접 반환합니다. JSX에 대해 들어 본 적이 없다면 걱정하지 마십시오. 나중에 더 자세히 설명하겠습니다.
• 반응 구성 요소는 상태가 높은 구성 요소 및 무국적 구성 요소로 나눌 수도 있습니다. 무국적 구성 요소의 작업은 단순히 부모 반응 구성 요소로부터받는 데이터를 표시하는 것입니다. 이벤트 나 입력을받는 경우 해당 이벤트 나 입력을 부모 구성 요소에 전달하여 처리 할 수 ​​있습니다.
반면에, 상태의 구성 요소는 특정 응용 프로그램 상태를 유지하는 책임이 있습니다. 여기에는 외부 소스에서 데이터를 얻거나 사용자가 로그인되는지 여부를 추적하는 것이 포함될 수 있습니다. 상태가 많은 구성 요소는 이벤트 및 입력에 대한 응답으로 상태를 업데이트 할 수 있습니다.

경험에 따르면, 당신은 가능한 한 많은 무국적 구성 요소를 작성해야합니다. 이러한 구성 요소는 응용 프로그램 및 기타 프로젝트에서 재사용하기가 더 쉽습니다.

가상 dom 이해 코딩을 시작하기 전에 React가 가상 DOM을 사용하여 페이지 렌더링을 처리한다는 것을 알아야합니다. jQuery에 익숙하다면 HTML dom을 통해 웹 페이지를 직접 조작 할 수 있다는 것을 알고 있습니다. 대부분의 경우,이 직접적인 상호 작용은 문제가 거의 없습니다. 그러나 대화식 실시간 웹 애플리케이션을 실행하는 것과 같은 경우에는 성능에 큰 영향을 줄 수 있습니다. 이 문제를 해결하기 위해, 가상 DOM (실제 DOM의 메모리 표현)이 발명되었으며, 현재 많은 현대 UI 프레임 워크 (React 포함)에서 사용됩니다. HTML DOM과 달리 Virtual DOM은 작동하기 쉽고 페이지 성능에 영향을 미치지 않고 밀리 초로 많은 수의 작업을 처리 할 수 ​​있습니다. React는 가상 DOM과 HTML DOM을 정기적으로 비교합니다. 그런 다음 차이를 계산하여 HTML DOM에 적용하여 가상 DOM과 일치합니다. 이런 식으로 React는 애플리케이션이 초당 60 프레임으로 꾸준히 렌더링되도록합니다. 즉, 사용자가 거의 지연이 없음을 의미합니다.

빈 반응 프로젝트를 시작하십시오 전제 조건을 기반으로, 나는 당신이 노드 환경을 설정하고 최신 버전의 NPM (또는 옵션 원사)을 설치했다고 가정합니다.

다음은 React Create App을 사용하여 단일 페이지 React 앱을 만들기위한 공식 유틸리티 스크립트 인 First React App을 빌드합니다.

지금 설치하자 :

그런 다음이를 사용하여 새로운 React 앱을 만듭니다.
인터넷 연결 속도에 따라 Create-React-App 명령을 처음 실행하는 경우 완료하는 데 시간이 걸릴 수 있습니다. 웹 서버, 컴파일러 및 테스트 도구를 포함하여 편리한 개발 환경을 설정하는 데 필요한 프로세스에 설치된 많은 패키지가 있습니다.

전 세계적으로 너무 많은 패키지를 설치하지 않으려면 NPX를 사용할 수도 있습니다.이를 통해 패키지를 설치하지 않고 다운로드하여 실행할 수 있습니다.

이 두 명령 중 하나를 실행하면 다음과 같은 것을 출력해야합니다.

프로젝트 설정 프로세스가 완료된 후 다음 명령을 실행하여 React 응용 프로그램을 시작하십시오.

당신은 다음 출력을 볼 수 있습니다 :


기본 브라우저가 자동으로 시작해야합니다. 다음과 같은 화면이 표시됩니다.

이제 우리는 입문 반응 프로젝트가 오류없이 실행된다는 것을 확인 했으므로 무대 뒤에서 무슨 일이 일어나고 있는지 봅시다. 좋아하는 코드 편집기를 사용하여 폴더 Message-App을 열 수 있습니다. package.json 파일 : 부터 시작하겠습니다

<code>npm i -g create-react-app</code>

보시다시피, React Creat 앱은 우리를 위해 몇 가지 종속성을 설치했습니다. 첫 번째 세 가지는 React Test 라이브러리와 관련이 있으며, 이는 (추측 할 수 있듯이) REACT 코드를 테스트 할 수 있습니다. 그런 다음 REACT 및 React-DOM을 보유하고 있는데, 이는 REACT 응용 프로그램의 핵심 패키지이며 최종적으로 React-Scriptts로 개발 환경을 설정하고 서버를 시작합니다 (방금 본).

그런 다음 반복적 인 작업을 자동화하기위한 4 개의 NPM 스크립트가 있습니다.

개발 서버를 시작하십시오 빌드 응용 프로그램의 프로덕션 준비 버전을 만듭니다 테스트 위에서 언급 한 테스트를 실행합니다 배출은 응용 프로그램의 개발 환경을 노출시킵니다
마지막 명령은 자세히 설명 할 가치가 있습니다. React App 도구는 실제 코드와 개발 환경을 명확하게 구분합니다. NPM 실행 실행을 실행하면 React Creat app는 장면 뒤에있는 일을 숨기고 프로젝트의 패키지 .json 파일에 모든 것을 덤프합니다. 이것은 응용 프로그램 의존성을보다 세분화하는 제어를 제공하지만 빌드 및 테스트 프로젝트에 사용 된 모든 복잡한 코드를 관리해야하므로이를 수행하지 않는 것이 좋습니다. 원하는 경우 Customize-Cra를 사용하여 팝업없이 빌드 프로세스를 구성 할 수 있습니다.
Create React App은 또한 ESLINT (ESLINTCONFIG 속성에서 볼 수 있음)를 지원하며 React-App ESLINT 규칙을 사용하여 구성됩니다.
package.json 파일의 BrowsersList 속성을 사용하면 응용 프로그램이 지원할 브라우저 목록을 지정할 수 있습니다. 이 구성은 PostCSS 도구 및 바벨과 같은 변환기에서 사용됩니다.
• React Create App의 가장 멋진 기능 중 하나는 상자에서 핫 재 장전을 제공한다는 것입니다. 즉, 코드에 대한 변경 사항으로 인해 브라우저가 자동으로 새로 고침됩니다. JavaScript 코드의 변경 사항은 페이지가 다시로드되며 CSS 변경 사항은 다시로드하지 않고 DOM을 업데이트합니다.
이제 ctrl
• c
를 눌러 개발 서버를 먼저 중지합시다. 서버가 중지되면 SRC 폴더의 ServiceWorker.js 및 SetuptEsts.js 파일을 제외한 모든 것을 삭제하십시오. 서비스 근로자의 역할을 이해하는 데 관심이 있다면 여기에서 자세히 알아볼 수 있습니다.
• SRC 폴더의 모든 것을 이해할 수 있도록 모든 코드를 처음부터 처음부터 만들 것입니다.
jsx 구문 소개 React Documentation JSX를 "JavaScript의 문법 확장"으로 정의하여 React 구성 요소를 쉽게 작성할 수 있습니다. JSX를 사용하면 표준 JavaScript 값과 마찬가지로 HTML 구조 또는 반응 요소를 전달할 수 있습니다.

이것은 간단한 예입니다 :

이 라인에주의를 기울이십시오 . 이것은 JSX입니다. 웹 브라우저에서 실행하려고하면 오류가 발생합니다. 그러나 React 응용 프로그램에서 JSX는 변환기 (예 : Babel)로 해석되며 React가 이해할 수있는 JavaScript 코드로 렌더링됩니다.
참고 : JSX에 대한 자세한 내용은 튜토리얼 "JSX의 초보자"에서 자세히 알아볼 수 있습니다.

과거에는 .jsx 파일 확장자를 사용하는 데 사용되는 JSX 파일에 반응합니다. 이제 React App 도구는 .js 파일 확장을 사용하여 React 파일을 생성합니다. .jsx 파일 확장자는 여전히 지원되지만 React Mestommations는 .js를 사용하는 것이 좋습니다. 그러나 다음과 같은 이유로 .jsx 확장자를 선호하는 반대 반응 개발자 그룹도 있습니다.

vs 코드에서 Emmet은 상자에서 .jsx 파일에 사용될 수 있습니다. 그러나 모든 .js 파일을 JavaScriptReact로 처리하여 Emmet이 이러한 파일에서 작동 할 수 있도록 CODE를 구성 할 수 있습니다.

표준 JavaScript 및 React JavaScript 코드마다 보풀 규칙이 다릅니다.
• 그러나이 자습서에서는 React App이 제공하는 내용을 따르고 .js 파일의 끝을 고수합니다.
"안녕하세요!" 코드를 쓰기 시작합시다. 새로 생성 된 Message-App의 SRC 폴더에서 index.js 파일을 작성하고 다음 코드를 추가하십시오.
다시 개발 서버를 시작하려면 또는
를 다시 사용하십시오. 브라우저는 다음을 표시해야합니다
이것은 가장 기본적인 "Hello World"반응 예입니다. index.js 파일은 프로젝트의 루트 디렉토리이며, 여기서 React 구성 요소가 렌더링됩니다. 코드가 어떻게 작동하는지 설명하겠습니다 :
1 행 : JSX 처리를 처리하려면 REACT 패키지를 가져옵니다.

2 행 : Root React 구성 요소를 렌더링하기 위해 Reactdom 패키지를 가져옵니다.

3 행 3 행 : 렌더링 함수를 호출하고 다음을 통과하십시오 : jsx 요소

<code>npm i -g create-react-app</code>

: HTML 컨테이너 (JSX 요소가 여기에서 렌더링됩니다). npm start yarn start

HTML 컨테이너는 public/index.html 파일에 있습니다. 31 행에는 가 표시됩니다. 이를 루트 돔 노드라고합니다.

JSX는 HTML과 비슷해 보이지만 몇 가지 주요 차이점이 있습니다. 예를 들어, 클래스 속성은 JavaScript 키워드이므로 클래스 속성을 사용할 수 없습니다. 대신 ClassName을 대신 사용하십시오. 또한 OnClick과 같은 이벤트는 JSX에서 OnClick으로 표시됩니다. 이제 Hello World 코드를 수정하겠습니다 :

JSX 코드를 요소라는 상수 변수로 옮겼습니다. 또한 H1 태그를 DIV 태그로 교체했습니다. JSX가 작동하려면 요소를 부모 태그로 랩핑해야합니다.

다음 예를 살펴보십시오 :

<code>npm i -g create-react-app</code>

위의 코드는 작동하지 않습니다. 동봉 된 태그에 인접한 JSX 요소를 포함해야 함을 나타내는 구문 오류가 표시됩니다. 이렇게 :
JSX에서 JavaScript 표현식을 계산하는 방법은 무엇입니까? 매우 간단합니다. 다음과 같이 Curly Braces를 사용하십시오

코드를 업데이트하고 브라우저에 "Hello, Jane Doe"가 표시되는지 확인하십시오. {5 2} &lt;code&gt;create-react-app message-app&lt;/code&gt;와 같은 다른 예제를 시도하십시오. JSX의 기본 사항이 있으므로 반응 구성 요소를 만들어 보겠습니다. <p> <t> 반응 구성 요소를 선언합니다 <is> 위의 예는 ReactDom.render ()가 어떻게 작동하는지 보여주는 쉬운 방법입니다. 일반적으로 모든 프로젝트 로직을 React 구성 요소에서 캡슐화하여 ReactDom.Render 함수로 전달합니다. </is></t></p> SRC 폴더에서 app.js라는 파일을 만들고 다음 코드를 입력하십시오. <pre class="brush:php;toolbar:false">&lt;code&gt;npx i -g create-react-app&lt;/code&gt;</pre> <create> 여기서, 우리는 react.component의 서브 클래스 인 JavaScript 클래스를 정의하여 React 구성 요소를 만듭니다. 또한 JSX 요소를 반환하는 렌더링 함수도 정의합니다. 다른 JSX 코드를 <code> <div> <p> 태그에 넣을 수 있습니다. 다음으로 다음 코드로 SRC/Index.js를 업데이트하여 브라우저의 반사 된 변경 사항을 확인하십시오. </p> <import> 먼저 앱 구성 요소를 가져옵니다. 그런 다음 다음과 같이 앱을 JSX 형식으로 렌더링합니다. JSX가 React DOM으로 밀 수있는 요소로 컴파일 할 수 있도록 필요합니다. 변경 사항을 저장 한 후 브라우저를 확인하여 올바른 메시지를 렌더링하십시오. <pre class="brush:php;toolbar:false">&lt;code&gt;... Success! Created react-app at C:\Users\mike\projects\github\message-app Inside that directory, you can run several commands: yarn start Starts the development server. yarn build Bundles the app into static files for production. yarn test Starts the test runner. yarn eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd message-app yarn start Happy hacking!&lt;/code&gt;</pre> 다음으로, 우리는 스타일을 적용하는 방법을 배웁니다. <p> <of> JSX 요소의 스타일을 설정하십시오 <ways> 반응 구성 요소를 스타일링하는 다양한 방법이 있습니다. 이 튜토리얼에서는 두 가지 방법을 소개합니다 </ways></of></p> <in in> JSX 인라인 스타일 <sheet> 외부 스타일 시트 <pre class="brush:php;toolbar:false">&lt;code&gt;cd message-app npm start&lt;/code&gt;</pre> <an> 다음은 JSX 인라인 스타일을 구현하는 방법의 예입니다. <p> <y> 반응 스타일은 일반 CSS와 매우 비슷하지만 몇 가지 주요 차이점이 있습니다. 예를 들어, Headerstyle은 객체 문자 그대로입니다. 우리는 평소와 같이 세미콜론을 사용할 수 없습니다. 또한 많은 CSS 선언이 JavaScript 구문과 호환되도록 변경되었습니다. 예를 들어, 우리는 텍스트 결정 대신 TextDecoration을 사용합니다. 기본적으로 Camel Nomenclature는 WebKitTransition과 같은 공급 업체 접두사를 제외하고 모든 CSS 키에 사용됩니다. 이는 대문자로 시작해야합니다. <code>{5 2} 우리는 또한 이런 방식으로 스타일을 구현할 수 있습니다 :

<code>npm i -g create-react-app</code>

두 번째 방법은 외부 스타일 시트를 사용하는 것입니다. 기본적으로 외부 CSS 스타일 시트가 이미 지원되었습니다. Sass와 같은 전처리기를 사용하려면 문서를 참조하여 구성 방법을 배우십시오.

SRC 폴더에서 app.css라는 파일을 만들고 다음 코드를 입력하십시오.

src/app.js 파일 상단에서 다음 가져 오기 명령문을 추가하십시오 :

저장 후 브라우저에서 텍스트 콘텐츠 크기가 크게 변경 될 것입니다. 다음과 같이 CSS 클래스를 사용할 수도 있습니다

src/app.js를 다음과 같이 업데이트하십시오

<code>create-react-app message-app</code>

우리는 HTML의 클래스 속성을 사용할 수 없습니다. 대신 ClassName을 사용합니다. 예상 한 출력은 다음과 같습니다
이제 REACT 프로젝트에 스타일을 추가하는 방법을 배웠으므로 무국적 및 상태의 반응 구성 요소를 계속 배우겠습니다.

<code>npx i -g create-react-app</code>

무국적 및 상태가 많은 구성 요소

멍청한 구성 요소라고도하는 상태의 구성 요소는 정보를 표시하는 구성 요소 일뿐입니다. 데이터 운영에 대한 논리가 포함되어 있지 않습니다. 사용자로부터 이벤트를 수신 한 다음 처리를 위해 부모 컨테이너로 전달할 수 있습니다.

파일 Message-View.js를 작성하고 다음 샘플 코드를 복사하십시오. 다음은 멍청한 구성 요소의 완벽한 예입니다 (기술적으로는 정적 구성 요소와 비슷하지만) :

<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!</code>

다음 코드를 사용하여 SRC/App.CSS에 몇 가지 기본 스타일을 추가하십시오.

마지막으로 전체 파일이 다음과 같이 보이도록 src/app.js를 수정하십시오.

<code>cd message-app
npm start</code>

지금까지 관련된 개념을 설명했듯이 코드는 지금까지 이해하기 쉽습니다. 이제 브라우저를 확인하면 다음 결과를 얻을 수 있습니다.

우리는 앞에서 React가 클래스 기반 및 기능 기반 구성 요소를 제공한다고 언급했습니다. 다음과 같이 함수 구문을 사용하여 MessageView를 다시 작성할 수 있습니다. 는 함수 구문에서 필요하지 않기 때문에 구성 요소 가져 오기를 제거했습니다. 이 스타일은 처음에는 혼란 스러울 수 있지만 곧 React 구성 요소 작성이 더 빠르다는 것을 곧 알게 될 것입니다.

또한, React 후크의 출현으로 인해 이러한 스타일의 쓰기 React 구성 요소가 점점 인기를 얻고 있습니다.

소품을 통해 데이터를 전송합니다 당신은 무국적 반응 구성 요소를 성공적으로 만들었습니다. 그러나 상태가 많은 구성 요소 나 컨테이너와 올바르게 통합하려면 추가 작업이 필요하기 때문에 완전하지 않습니다. 현재 MessageView는 정적 데이터를 표시합니다. 입력 매개 변수를 수락 할 수 있도록 수정해야합니다. 우리는 소위 소품을 사용하여이를 달성합니다 - 부모 구성 요소에서 전달할 데이터입니다.

먼저 다음과 같이 메시지 뷰 구성 요소를 변경하십시오

<code>npm i -g create-react-app</code>

여기에 주목해야 할 것은 메시지 변수를 정의하는 방법입니다. 우리는 그것을 에 할당하고 상태가 많은 부모 구성 요소에서 그것을 전달합니다. 그런 다음 JSX에서 메시지 변수를 참조하여 페이지에 출력 할 수 있습니다.

이제 MessageView의 부모 구성 요소를 작성하겠습니다. Message-list.js라는 새 파일을 만들고 다음 코드를 추가하십시오. this.props.message 여기에서는 State를 사용하여 메시지가 포함 된 객체를 저장합니다. React의 마법은 상태 객체가 변경되면 구성 요소가 다시 렌더링되어 UI를 업데이트한다는 것입니다.

그런 다음 JSX에서는 State Object의 메시지 속성을 MessageView 구성 요소로 전달합니다.

마지막 단계는 앱 구성 요소를 업데이트하여 상태가없는 Messagelist 구성 요소를 렌더링하는 것입니다.

변경 사항을 저장 한 후 브라우저에서 결과를 확인하십시오.

<code>create-react-app message-app</code>

무슨 일이 일어나고 있는지 이해하기 위해 잠시 시간을 내십시오. 우리는 (상태가 많은) Messagelist 구성 요소의 상태 객체를 선언합니다. 이 개체의 메시지 속성에는 메시지가 포함되어 있습니다. 우리의 렌더링 함수에서 우리는이 메시지를 소위 소품을 사용하여 (무국적) 아동 구성 요소에게 전달할 수 있습니다.

(stationeles) messageview 구성 요소에서 를 사용하여 메시지에 액세스 할 수 있습니다. 그런 다음이 값을 JSX로 전달하여 페이지로 렌더링 할 수 있습니다.

허!

prop check 응용 프로그램이 커지고 데이터가 소품으로 전달되면 구성 요소가 예상되는 데이터 유형을 수신하는지 확인하는 것이 유용합니다.

운 좋게도, 우리는 prop-types 패키지를 사용하여이를 달성 할 수 있습니다. 실제 예를 신속하게 보려면 다음과 같이 MessageView 구성 요소를 변경하십시오.

<code>npx i -g create-react-app</code>

메시지 소품이 없으면 RECT 응용 프로그램이 오류를보고하게됩니다. 구성 요소가 수신 한 객체가 객체가 아닌 경우 오류가 발생합니다.

부모 구성 요소의 상태를 다음과 같이 변경하여 시도 할 수 있습니다.

브라우저로 돌아가 콘솔을 엽니 다. 콘솔에 문서화 된 다음을 볼 수 있습니다.

구성 요소 재사용 이제 MessageView 인스턴스를 사용하여 여러 메시지를 표시하는 방법을 살펴 보겠습니다. 코드 재사용이 매우 쉽기 때문에 React가 플래시를 시작하는 곳입니다 (볼 수 있습니다). 먼저, State.message를 배열로 변경하여 메시지로 바꿉니다. 그런 다음 JavaScript의 맵 함수를 사용하여 각 MessageView 구성 요소 인스턴스를 생성합니다. 각 State.Messages 배열의 메시지에 해당합니다.

우리는 또한 ID와 같은 Key라는 특수 속성으로 고유 한 값을 채워야합니다. RECT는 목록에 어떤 항목이 변경, 추가 또는 삭제되었는지 추적해야합니다.

다음과 같이 Messagelist 코드를 업데이트하십시오

결과를 ​​확인하려면 브라우저를 확인하십시오

보시다시피, 강력하고 복잡한 UI 인터페이스를 만들기 위해 React로 빌딩 블록을 쉽게 정의 할 수 있습니다.

반응 후크를 사용하도록 리팩토링되었습니다 후크는 최신 버전의 React이지만 React World를 휩쓸고 있습니다. 간단히 말해서, 그들은 함수 구성 요소를 반응하기 위해 상태 (및 기타 기능)를 추가 할 수있게합니다.

나는 Messag React V16.8 이상을 사용할 때만 가능합니다.

위의 예에서, 상태 객체를 usestate React 후크로 교체했습니다. 이름에서 알 수 있듯이 구성 요소 상태를 관리 할 수 ​​있습니다.

후크를 사용하면 대규모 프로젝트를 수행 할 때 소위 소품 시추를 피하는 데 도움이됩니다. Prop Drilling을 사용하면 소품을 여러 구성 요소 (궁극적으로 해당 데이터가 필요하지 않음)에 전달할 수 있으며, 단지 깊게 중첩 된 구성 요소에 도달 할 수 있습니다.

우리는 또한 MessageView 구성 요소를 함수 구성 요소로 변환 할 수 있습니다 :

이제 구성 요소에서 메시지 소품을받는 방법에 주목하십시오.

이것은 객체 파괴라는 기술을 사용하여 배열이나 객체에서 개별 항목을 추출하여 약어 구문을 사용하여 변수에 넣을 수 있습니다.

우리는 여기에서 동일한 기술을 사용하여 메시지 객체에서 필요한 값을 얻고 모든 것에 메시지를 추가하는 것을 피합니다.

<code>npm i -g create-react-app</code>

그게 다야!

나는이 게시물에서 React Hooks를 더 소개하려고하지 않으며, 그것들이 존재하고 React 커뮤니티에서 점점 더 인기를 얻고 있음을 알려주십시오. 후크에 대해 더 많이 배우려면 시작 가이드에 대한 반응 후크를 읽으십시오.

데모 이것은 당신이 사용할 수있는 라이브 데모입니다 :

Codepen Demo Link

<code>create-react-app message-app</code>

설문 학습 우리는 이제이 입문 안내서를 완료했습니다. 데이터 수집, 오류 처리, 라우팅, 사용 양식, 디버깅 등과 같은 많은 반응 개념이 있습니다. 목록은 계속됩니다 ... 좋은 소식은 itepoint 프리미엄에 대한 훌륭한 반응 콘텐츠와 블로그의 많은 훌륭한 기사를 가지고 있다는 것입니다. 나는 당신이 그들을 확인하고 좋은 것을 만들 것을 권장합니다.

react

를 시작하는 것에 대한 FAQ REACT 학습의 전제 조건은 무엇입니까?

<code>npx i -g create-react-app</code>

React를 배우기 전에 React는 JavaScript 라이브러리이기 때문에 견고한 JavaScript 지식을 마스터하는 것이 매우 중요합니다. ES6 기능, 클로저, 비동기 프로그래밍 및이 키워드와 같은 개념에 익숙해야합니다. HTML 및 CSS 지식도 HTML과 유사한 JavaScript 구문 확장자 인 JSX를 사용하므로 필수적입니다. 또한 Node.js 및 NPM (Node Package Manager)에 익숙해지면 RECT 개발의 패키지 관리 및 실행 스크립트에 일반적으로 사용되므로 유익합니다.

React의 개발 환경을 설정하는 방법은 무엇입니까?

React의 개발 환경을 설정하려면 먼저 Node.js 및 NPM을 설치해야합니다. 설치가 완료되면 React App 명령 줄 도구를 사용하여 새 React 응용 프로그램을 만들 수 있습니다. 최신 JavaScript 기능을 사용하고 개발 경험을 제공하며 생산 응용 프로그램을 최적화 할 수 있도록 개발 환경을 설정합니다. 또한 애플리케이션을 테스트하려면 Visual Studio Code 및 웹 브라우저와 같은 텍스트 편집기가 필요합니다.

JSX 란 무엇이며 반응에서 중요한 이유는 무엇입니까?

JSX는 JavaScript XML을 나타냅니다. Facebook에서 개발 한 JavaScript 구문 확장으로 반응에 HTML을 쓸 수 있습니다. JSX를 사용하면 React에서 HTML을 더 쉽게 작성하고 추가 할 수 있습니다. 그것 없이는 JavaScript 코드를 읽고 쓰기가 어렵습니다. 또한 코드를 모듈화하고 이해하고 유지하기 쉽게 만드는 데 도움이됩니다.

React의 구성 요소는 무엇입니까?

구성 요소는 모든 RECT 응용 프로그램의 빌딩 블록입니다. React의 구성 요소는 UI의 일부를 제어하는 ​​재사용 가능한 코드입니다. 각 구성 요소는 독립적이며 복잡한 UI를 만들기 위해 결합 할 수 있습니다. React 구성 요소는 일반적으로 JSX로 작성되며 자체 상태와 소품을 유지할 수 있습니다.

React의 상태와 소품의 차이는 무엇입니까?

반응에서 상태와 소품은 JavaScript 객체입니다. 비록 둘 다 렌더 출력에 영향을 미치는 정보를 보유하고 있지만 구성 요소와 관련하여 다르게 수행합니다. 소품 (속성의 약어)은 부모 구성 요소에서 어린이 구성 요소로 데이터를 전달하는 방법입니다. 반면에 상태는 구성 요소 내부에서 관리되며 구성 요소 내부에서 변경할 수 있습니다.

반응은 어떻게 이벤트를 처리합니까?

React 이벤트는 소문자가 아닌 Camelcase를 사용하여 명명되었습니다. JSX를 사용할 때는이 기능을 문자열이 아닌 이벤트 핸들러로 전달합니다. 예를 들어, HTML 클릭 이벤트는 JSX에서 OnClick으로 작성됩니다. React에는 또한 합성 이벤트 시스템이 있습니다. 즉, 자체 이벤트 시스템이있어 W3C 이벤트 시스템과 완전히 호환됩니다.

React Middle Key의 의미는 무엇입니까?

React의 키는 해당 드라이버 렌더링 데이터의 고유 한 가상 DOM 요소를 식별하는 데 사용됩니다. 기존 DOM 요소를 통한 반복하여 렌더링 최적화에 반응하는 데 도움이됩니다. 키는 고유 한 숫자 또는 문자열이어야하며 중복 키를 사용하면 응용 프로그램을 중단 할 수 있습니다.

React의 컨텍스트 API는 무엇입니까?

Context API는 RECT가 제공하는 구성 요소 구조로, 응용 프로그램의 모든 수준에서 특정 형태의 데이터를 공유 할 수 있습니다. 그 목표는 소품 시추 문제를 해결하는 것입니다.

Redux는 무엇이며 React와 어떤 관련이 있습니까?

redux는 클라이언트, 서버 및 기본 환경에서 일관되게 실행되고 테스트하기 쉽습니다. 주로 React의 상태 관리 도구로 사용되지만 다른 JavaScript 프레임 워크 또는 라이브러리와 함께 사용할 수 있습니다.

반응의 고리는 무엇입니까?

후크는 React 16.8의 새로운 기능으로, 클래스를 쓰지 않고 상태 및 기타 React 기능을 사용할 수 있습니다. 후크는 기능 구성 요소에서 상태 및 수명주기 기능을 "반응"할 수있는 기능입니다. 그들은 수업에서 일하지 않습니다. 수업없이 React를 사용할 수 있습니다.

위의 내용이 원래 텍스트를 다시 작성하고 연마하여 원래 의미를 바꾸지 않고 가독성과 유창성을 향상시키기 위해 노력했습니다. 이미지 형식은 동일하게 유지됩니다. 네트워크 사진에 직접 액세스 할 수 없으므로 이미지 링크는 동일하게 유지됩니다.