초보자를 위한 ReactJS 튜토리얼: 단계별 예시를 통해 학습

작성자 : 제임스 하트만 제임스 하트만
Hours 업데이트

ReactJS는 무엇입니까?

ReactJS 오픈 소스 프런트 엔드입니다 Java사용자 인터페이스를 구축하기 위한 스크립트 라이브러리. ReactJS Facebook과 개별 개발자 및 회사 커뮤니티에서 유지 관리합니다. 단일 페이지 웹사이트와 모바일 애플리케이션을 구축하는 기반으로 널리 사용됩니다. 사용하기 매우 쉽고 사용자가 재사용 가능한 UI 구성 요소를 만들 수 있습니다.

ReactJS의 특징

JSX : JSX는 자바스크립트의 확장입니다. React에서 JSX를 반드시 사용해야 하는 것은 아니지만 좋은 기능 중 하나이며 사용하기 쉽습니다.

구성 요소들: 구성요소는 로직을 재사용 가능한 독립 코드로 분할하여 코드를 쉽게 만드는 데 도움이 되는 순수 자바스크립트 함수와 같습니다. 컴포넌트를 함수로, 컴포넌트를 클래스로 사용할 수 있습니다. 구성 요소에는 상태, 즉 작업을 쉽게 해주는 소품도 있습니다. 클래스 내부에서는 각 props의 상태가 유지됩니다.

가상 DOM: React는 가상 DOM, 즉 메모리 내 데이터 구조 캐시를 만듭니다. DOM의 최종 변경 사항만 나중에 브라우저 DOM에서 업데이트되었습니다.

Javascript 표현식: JS 표현식은 중괄호(예: {})를 사용하여 jsx 파일에서 사용할 수 있습니다.

ReactJS의 장점

ReactJS 사용의 중요한 장점/이점은 다음과 같습니다.

  • ReactJS는 메모리 내 데이터 구조 캐시를 활용하는 가상 DOM을 사용하며 최종 변경 사항만 브라우저 DOM에 업데이트됩니다. 이렇게 하면 앱이 더 빨라집니다.
  • React 컴포넌트 기능을 사용하여 원하는 컴포넌트를 생성할 수 있습니다. 구성 요소는 재사용이 가능하며 코드 유지 관리에도 도움이 됩니다.
  • Reactjs는 오픈 소스 자바스크립트 라이브러리이므로 시작하기 쉽습니다.
  • ReactJS는 단기간에 큰 인기를 얻었으며 Facebook과 Instagram에서 유지관리하고 있습니다. 애플 등 많은 유명 기업에서 사용하고 있으며, Netflix등
  • Facebook은 라이브러리인 ReactJS를 유지 관리하므로 잘 관리되고 업데이트됩니다.
  • ReactJS는 데스크톱과 모바일 앱 모두를 위한 풍부한 UI를 개발하는 데 사용할 수 있습니다.
  • 대부분의 코딩이 다음에서 수행되므로 디버그 및 테스트가 쉽습니다. Javascript HTML보다는요.

ReactJS의 단점

ReactJS 사용의 단점/단점은 다음과 같습니다.

  • 대부분의 코드는 JSX로 작성됩니다. 즉, Html과 CSS는 javascript의 일부입니다. 대부분의 다른 프레임워크는 Html을 javascript 코드와 별도로 유지하는 것을 선호하기 때문에 상당히 혼란스러울 수 있습니다.
  • ReactJS의 파일 크기는 큽니다.

CDN에서 ReactJS 사용

React 작업을 시작하려면 먼저 Reactjs를 설치해야 합니다. 아래와 같이 CDN 자바스크립트 파일을 사용하면 쉽게 Reactjs 사용을 시작할 수 있습니다.

CDN 링크를 얻으려면 Reactjs의 공식 사이트로 이동하십시오. https://reactjs.org/docs/cdn-links.html 그러면 다음 이미지를 설명하는 데 필요한 파일을 받게 됩니다.

CDN에서 ReactJS 사용

개발자용

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

자극용

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>		
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>

교체 버전 React-development.js 및 React-dom.development.js 모두에 대한 최신 반응 버전을 사용하세요. 최종적으로 파일을 호스팅하여 Reactjs 작업을 시작할 수 있습니다.

CDN 파일을 사용하려는 경우 교차 도메인 문제를 방지하기 위해 교차 출처 속성을 유지해야 합니다. Reactjs 코드는 브라우저에서 직접 실행될 수 없으며 브라우저에서 실행되기 전에 Babel을 사용하여 javascript로 변환되어야 합니다.

사용할 수 있는 BabelJS 스크립트는 다음과 같습니다.

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

다음은 cdn 파일과 babeljs 스크립트를 사용하여 작동하는 ReactJS 예제입니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>   
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body> 
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>   
  </body>
</html>

출력:

프로덕션 출력용

다음 장에서 코드의 세부 사항을 살펴보겠습니다. 여기서 CDN 파일을 사용하는 방법을 살펴보겠습니다. Babel 스크립트를 직접 사용하는 것은 좋은 관행이 아니며, 초보자는 지금은 Reactjs를 배우기 위해 사용할 수 있다고 합니다. 프로덕션에서는 npm 패키지를 사용하여 React를 설치해야 합니다.

관련 기사

NPM 패키지 사용

nodejs가 설치되어 있는지 확인하세요. 설치되지 않은 경우 nodejs에 대한 이 튜토리얼을 진행하세요(https://www.guru99.com/node-js-tutorial.html) 설치.

nodejs가 설치되면 폴더를 만듭니다. 반응 프로젝트/.

프로젝트 설정을 시작하려면 명령을 실행하세요. npm 초기화.

폴더 구조는 다음과 같습니다.

reactproj\
package.json

이제 필요한 패키지를 설치하겠습니다.

Reactjs 패키지 목록은 다음과 같습니다.

npm install react --save-dev
npm install react-dom --save-dev
npm install react-scripts --save-dev

명령 프롬프트를 열고 Reactproj/ 폴더 내에서 위의 명령을 실행하세요.

폴더 만들기 src / 모든 js 코드가 해당 폴더에 들어옵니다. Reactjs 프로젝트의 모든 코드는 src/ 폴더에서 사용할 수 있습니다. 아래와 같이 index.js 파일을 생성하고 import React 및 React-dom을 추가합니다.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

우리는 reactjs의 기본 코드를 반환했습니다. 다음 장에서 세부 사항을 설명하겠습니다. 우리는 다음을 표시하고 싶습니다. 안녕하세요, Guru99 튜토리얼에서 ID가 "root"인 dom 요소에도 동일하게 제공됩니다. 아래와 같이 시작 파일인 index.html 파일에서 가져옵니다.

public/ 폴더를 생성하고 아래와 같이 index.html을 추가하세요.

index.html 페이지

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

패키지 반응 스크립트는 코드를 컴파일하고 서버를 시작하여 html 파일(예: index.html)을 표시하는 작업을 담당합니다. 아래와 같이 반응 스크립트를 사용하여 코드를 컴파일하고 서버를 시작하는 명령을 package.json에 추가해야 합니다.

 "scripts": {
    "start": "react-scripts start" 
  }

모든 패키지를 설치하고 위의 명령을 추가하면 최종 package.json은 다음과 같습니다.

패키지.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Reactjs 테스트를 시작하려면 다음 명령을 실행하세요.

npm run start

C:\reactproj>npm run start		
> reactproj@1.0.0 start C:\reactproj		
> react-scripts start

URL이 포함된 브라우저가 열립니다. http://localhost:3000/ 다음과 같이 :

공개/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

NPM 패키지 사용

다음 장에서도 동일한 프로세스를 사용하여 javascript 파일을 실행할 것입니다. 모든 js 및 .jsx 파일을 src/ 폴더에 추가합니다. 파일 구조는 다음과 같습니다.

reatproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

첫 번째 React 프로젝트 설정을 만드는 방법

다음은 첫 번째 반응 애플리케이션을 시작하기 위한 이 ReactJS 튜토리얼의 단계별 가이드입니다.

단계 1) 반응 패키지를 가져옵니다.
1. ReactJS를 시작하려면 먼저 다음과 같이 반응 패키지를 가져와야 합니다.

import React from 'react';	
import ReactDOM from 'react-dom';

2. src/ 폴더에 index.js라는 이름으로 파일을 저장하세요.

단계 2) 간단한 코드를 작성하세요.
이 튜토리얼 React JS에서 간단한 코드를 작성해 메시지를 표시하겠습니다. “안녕하세요, Guru99 Tutorials입니다!”

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactDOM.렌더링 추가할 것이다 ID가 루트인 요소에 태그를 지정합니다. 우리가 가지고 있는 html 파일은 다음과 같습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

단계 3) 코드를 컴파일하십시오.

다음으로 이 React.js 튜토리얼에서는 브라우저에서 출력을 얻기 위해 코드를 컴파일해야 합니다.

폴더 구조는 다음과 같습니다.

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

package.json에 최종 파일을 컴파일하는 명령을 다음과 같이 추가했습니다.

"scripts": {
    "start": "react-scripts start"
  },

최종 파일을 컴파일하려면 다음 명령을 실행하세요.

npm run start

위 명령을 실행하면 파일을 컴파일하고 오류가 있으면 알려줍니다. 모두 괜찮아 보이면 브라우저를 열고 다음 위치에서 index.html 파일을 실행합니다. http://localhost:3000/index.html

명령: npm 실행 시작:

C:\reactproj>npm run start

> reactproj@1.0.0 start C:\reactproj
> react-scripts start

단계 4) 출력을 확인하세요.
URL http://localhost:3000 아래와 같이 코드가 컴파일되면 브라우저에서 열립니다.

첫 번째 React 프로젝트의 출력

JSX 란 무엇입니까?

JSX는 자바스크립트의 확장입니다. HTML을 사용할 수 있는 템플릿 스크립트입니다. Javascript 함께.

다음은 JSX 코드의 간단한 예입니다.

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";

React에 JSX가 필요한 이유는 무엇입니까?

UI의 경우 HTML이 필요하며 DOM의 각 요소에는 처리할 이벤트, 상태 변경 등이 있습니다.

React의 경우 동일한 파일에서 Html과 javascript를 사용하고 DOM의 상태 변경을 효율적으로 처리할 수 있습니다.

JSX의 표현식

다음은 JSX에서 표현식을 사용하는 방법에 대한 간단한 예입니다.

이전 ReactJS 예제에서는 다음과 같이 작성했습니다.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

이제 위의 코드를 변경하여 표현식을 추가하겠습니다. 표현식은 중괄호 {} 안에 사용되며 런타임 중에 확장됩니다. React의 표현식은 Javascript 표현식과 동일합니다.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

이제 브라우저에서 동일한 내용을 테스트해 보겠습니다.

JSX 출력의 표현식

{display} 표현식이 대체되지 않은 것을 볼 수 있습니다. React는 .js 파일 내에서 표현식이 사용될 때 무엇을 해야 할지 모릅니다.

이제 아래와 같이 변경 사항을 추가하고 .jsx 파일을 생성해 보겠습니다.

테스트.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

필요한 코드를 추가했으며 index.js의 text.jsx 파일을 사용하겠습니다. h1태그 변수는 script.js 내부에서 사용되므로 위에 표시된 test.jsx와 동일하게 내보내집니다.

index.js의 수정된 코드는 다음과 같습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);


index.js에서 test.jsx를 사용하려면 아래와 같이 먼저 가져와야 합니다.

import h1tag from './test.jsx';

이제 아래와 같이 ReactDOM.render에서 h1tag를 사용할 수 있습니다.

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

브라우저에서 동일한 내용을 확인할 때의 출력은 다음과 같습니다.

산출

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

구성 요소는 논리를 재사용 가능한 독립 코드로 분할하여 코드를 쉽게 만드는 데 도움이 되는 순수 자바스크립트 함수와 같습니다.

기능으로서의 구성요소

테스트.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
} 
const Hello_comp = <Hello />;
export default Hello_comp;


우리는 다음과 같은 함수를 만들었습니다. 안녕하세요 위와 같이 h1 태그를 반환했습니다. 함수 이름은 아래와 같이 요소 역할을 합니다.

const Hello_comp = <Hello />;
export default Hello_comp;

구성 요소 안녕하세요 HTML 태그로 사용됩니다. 즉, 그리고 할당 Hello_comp 변수이며 내보내기를 사용하여 동일한 내용을 내보냅니다.

이제 아래와 같이 index.js 파일에서 이 구성 요소를 사용해 보겠습니다.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

브라우저의 출력은 다음과 같습니다.

ReactJS의 구성 요소 출력

구성요소로서의 클래스

다음은 클래스를 구성 요소로 사용하는 ReactJS 예제입니다.

테스트.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React. Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

index.js 파일에서 Hello 구성 요소를 다음과 같이 사용할 수 있습니다.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Component Hello는 Html 태그로 사용됩니다. 즉, .

다음은 동일한 결과입니다.

구성 요소 출력으로 클래스

ReactJS의 상태란 무엇입니까?

상태는 Reactjs 렌더링과 함께 사용할 데이터가 있는 props와 유사한 자바스크립트 객체입니다. 상태 데이터는 비공개 개체이며 클래스 내부의 구성 요소 내에서 사용됩니다.

상태의 예

다음은 클래스 내에서 상태를 사용하는 방법에 대한 실제 예제입니다.

테스트.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

브라우저에서 테스트할 때 얻는 결과는 다음과 같습니다.

ReactJS 출력의 상태

ReactJS의 Prop은 무엇입니까?

Props는 컴포넌트 내부에서 사용되는 속성입니다. 이는 구성 요소 내에서 사용할 수 있는 전역 개체 또는 변수로 작동합니다.

함수 구성요소에 대한 소품

다음은 props를 함수 구성 요소에 전달하는 예입니다.

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

위에 표시된 대로 추가했습니다. 메시지 ~에 귀속하다 요소. 다음과 같이 동일하게 액세스할 수 있습니다. 소품 Hello 함수 내부에는 메시지 속성 세부정보이며, 동일한 내용이 표현식으로 사용됩니다.

구성요소는 index.js에서 다음과 같이 사용됩니다.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

브라우저의 출력은 다음과 같습니다.

기능 구성 요소 출력에 대한 소품

클래스 구성요소에 대한 소품

클래스의 props에 액세스하려면 다음과 같이 할 수 있습니다.

테스트.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

이 어플리케이션에는 XNUMXµm 및 XNUMXµm 파장에서 최대 XNUMXW의 평균 출력을 제공하는 메시지 속성은 다음과 같이 index.js의 구성 요소에 전달됩니다.

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
);

브라우저의 출력은 다음과 같습니다.

클래스 구성 요소 출력에 대한 소품

또한 확인:- 초보자를 위한 AngularJS 튜토리얼: AngularJS를 단계별로 배우세요

구성요소의 수명주기

구성요소 수명주기는 초기화, 마운트, 업데이트 및 마운트 해제 단계로 구분됩니다.

각 컴포넌트에 대한 자세한 설명은 다음과 같습니다.

ReactJS의 구성요소는 다음과 같은 단계로 구성됩니다.

초기화: 이는 구성 요소 수명주기의 첫 번째 단계입니다.

여기에는 기본 소품과 초기 수준의 상태가 있습니다.

설치: 이 단계에서는 Component가 dom 내부에서 렌더링됩니다. 우리는 마운팅 상태에서 다음 방법에 노출됩니다.

  • componentDidMount(): 이는 Component가 DOM에 추가된 경우에도 호출됩니다.
  • render(): 생성된 모든 구성 요소에 대해 이 메서드가 있습니다. Html 노드를 반환합니다.

업데이트: 이 상태에서는 dom이 사용자와 상호 작용하고 업데이트됩니다. 예를 들어, 텍스트 상자에 무언가를 입력하면 상태 속성이 업데이트됩니다.

업데이트 상태에서 사용할 수 있는 메서드는 다음과 같습니다.

  • shouldComponentUpdate() : 구성 요소가 업데이트될 때 호출됩니다.
  • componentDidUpdate() : 구성 요소가 업데이트된 후.

마운트 해제: 이 상태는 구성 요소가 필요하지 않거나 제거될 때 나타납니다.

언마운트 상태에서 사용할 수 있는 방법은 다음과 같습니다.

Component willUnmount(): Component가 제거되거나 파괴될 때 호출됩니다.

작업 예

다음은 각 상태에서 호출되는 메서드를 보여주는 작업 예제입니다.

예: complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }
  
  componentDidMount() {  
    console.log('Mounting State : calling method componentDidMount');
  }   
 
  shouldComponentUpdate() {  
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }  

  componentDidUpdate() {  
    console.log('Update  State : calling method componentDidUpdate')  
  }  
  componentWillUnmount() {  
    console.log('UnMounting State : calling method componentWillUnmount');
  }  

  render() {
    return (
      <div>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

ReactDOM.render(
    <COMP_LIFE />,
    document.getElementById('root')
);

브라우저에서 출력을 확인하면

산출

브라우저 콘솔에서는 다음을 얻습니다.

브라우저 콘솔 출력

사용자가 텍스트 상자에 입력하는 경우:

사용자 값 출력

콘솔에 다음 메시지가 표시됩니다.

콘솔 출력

양식 작업

Reactjs에서 다음과 같은 HTML 입력 요소 , <select />에는 자체 상태가 있으며 사용자가 setState() 메서드를 사용하여 상호 작용할 때 업데이트되어야 합니다.

이번 장에서는 ReactJS에서 폼을 다루는 방법을 살펴보겠습니다.

다음은 작동하는 예입니다.

form.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

입력 필드의 경우 상태를 유지해야 하므로 이를 위해 React라는 특수 메서드를 제공합니다. 세트상태, 이는 변경 사항이 있을 때마다 상태를 유지하는 데 도움이 됩니다.

우리는 텍스트 상자와 제출 버튼에서 onChange 및 onClick 이벤트를 사용했습니다. 사용자가 텍스트 상자 안에 입력하면 onChange 이벤트가 호출되고, state 객체 state 내부의 이름 필드가 아래와 같이 업데이트됩니다.

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

ReactDOM.render(
    <Form />,
    document.getElementById('root')
);

브라우저의 출력은 다음과 같습니다.

양식 출력 작업

1단계) 텍스트 상자에 이름을 입력하세요.

양식 출력 작업

  1. 제출 버튼을 클릭하십시오

양식 출력 작업

ReactJS에서 이벤트 작업

Reactjs에서 이벤트를 다루는 것은 자바스크립트에서 했던 것과 동일합니다. 자바스크립트에서 사용되는 모든 이벤트 핸들러를 사용할 수 있습니다. setState() 메서드는 사용자가 Html 요소와 상호 작용할 때 상태를 업데이트하는 데 사용됩니다.

다음은 Reactjs에서 이벤트를 사용하는 방법에 대한 실제 예입니다.

events.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

입력 필드의 경우 상태를 유지해야 하므로 이를 위해 React라는 특수 메서드를 제공합니다. 세트상태, 이는 변경 사항이 있을 때마다 상태를 유지하는 데 도움이 됩니다.

우리는 이벤트를 사용했습니다 onChange and 클릭 텍스트 상자와 버튼에. 사용자가 텍스트 상자 안에 입력하면 onChange 이벤트가 호출되고 상태 객체 상태 내부의 이름 필드가 아래와 같이 업데이트됩니다.

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

ReactDOM.render(
    <EventTest />,
    document.getElementById('root')
);

브라우저의 출력은 다음과 같습니다.

이벤트 출력 작업

사용자가 이름을 입력하면:

이벤트 출력 작업

사용자가 여기를 클릭 버튼을 클릭하면:

이벤트 출력 작업

ReactJS에서 인라인 CSS로 작업하기

Reactjs에서 인라인 CSS의 작동을 이해하기 위해 실제 예제를 살펴보겠습니다.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const h1Style = {
    color: 'red'
};
  
function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

h1 태그에 color: 'red' 스타일을 추가했습니다.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

브라우저의 출력은 다음과 같습니다.

인라인 CSS 출력 작업

위의 예와 같이 요소에 원하는 스타일 개체를 만들고 표현식을 사용하여 스타일을 추가할 수 있습니다.

ReactJS에서 외부 CSS로 작업하기

외부 CSS를 생성해 보겠습니다. 이를 위해 css/ 폴더를 생성하고 그 안에 style.css를 추가합니다.

style.css

.h1tag {
color:red;
}

index.html 파일에 style.css를 추가하세요.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head> 
  <body>
    <div id = "root"></div>
    <script src = "out/script.min.js"></script>
  </body>
</html>

이제 .jsx 파일의 h1 태그에 클래스를 추가해 보겠습니다.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

let classforh1 = 'h1tag';
  
function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

className 속성은 클래스 세부 정보를 제공합니다. 이제 브라우저에서 테스트해 보겠습니다.

외부 CSS 출력 작업

브라우저에서 h1 태그를 검사하면 다음과 같이 표시됩니다.

외부 CSS 출력 작업

class=” h1tag”가 h1 태그에 성공적으로 추가된 것을 확인할 수 있습니다.

요약

  • ReactJS는 오픈소스 프론트엔드입니다 Java사용자 인터페이스를 빌드하기 위한 스크립트 라이브러리입니다. Facebook에서 유지 관리하고 있으며 오늘날 많은 회사에서 UI 개발을 위해 사용합니다.
  • ReactJS의 핵심 기능으로는 JSX, 컴포넌트(기능적 컴포넌트 및 클래스 기반 컴포넌트), 컴포넌트의 라이프사이클, props, 컴포넌트에 대한 상태 지원, javascript 표현식 작업 등이 있습니다.
  • ReactJS의 프로젝트 설정은 CDN 파일을 사용하고 npm 패키지를 사용하여 프로젝트를 빌드하는 방법을 설명합니다.
  • JSX는 자바스크립트의 확장입니다. Html과 javascript를 함께 사용할 수 있는 템플릿 스크립트입니다.
  • 구성 요소는 논리를 재사용 가능한 독립 코드로 분할하여 코드를 쉽게 만드는 데 도움이 되는 순수 자바스크립트 함수와 같습니다.
  • 상태는 Reactjs 렌더링과 함께 사용할 데이터가 있는 props와 유사한 자바스크립트 객체입니다. 상태 데이터는 비공개 개체이며 클래스 내부의 구성 요소 내에서 사용됩니다.
  • Props는 컴포넌트 내부에서 사용되는 속성입니다.
  • 구성요소 수명주기는 초기화, 마운트, 업데이트 및 마운트 해제 단계로 구분됩니다.
  • Reactjs html 입력 요소에서 다음과 같습니다. , <select />에는 자체 상태가 있으며 사용자가 setState() 메서드를 사용하여 상호작용할 때 업데이트되어야 합니다.
  • Reactjs에서 이벤트를 다루는 것은 자바스크립트에서 했던 것과 동일합니다. 자바스크립트에서 사용되는 모든 이벤트 핸들러를 사용할 수 있습니다. setState() 메서드는 사용자가 Html 요소와 상호 작용할 때 상태를 업데이트하는 데 사용됩니다.
  • ReactJS를 사용하면 자바스크립트 표현식을 사용하여 인라인 CSS뿐만 아니라 외부 CSS로도 작업할 수 있습니다.

또한 확인:- 상위 70개 React 인터뷰 질문 및 답변(업데이트됨)

당신은 좋아할 것입니다 :