AI 도구가 React 코드 작성에 도움이 될 수 있을까요?

네. GitHub Copilot이나 ChatGPT 같은 어시스턴트는 컴포넌트를 구성하고, 오류를 설명하며, 클래스 컴포넌트를 Hooks로 변환해 줍니다. AI가 ReactDOM.render처럼 더 이상 사용되지 않는 API를 제안할 수 있으므로 생성된 코드는 항상 검토해야 합니다.

초보자를 위한 ReactJS 튜토리얼

⚡ 스마트 요약

ReactJS는 수많은 최신 웹사이트와 모바일 애플리케이션의 사용자 인터페이스를 구현하는 데 사용됩니다. 이 페이지에서는 ReactJS 라이브러리가 무엇인지, 어떻게 설정하는지, 그리고 컴포넌트, JSX, 상태, 속성 및 이벤트가 어떻게 상호 작용하는지 설명합니다.

⚛️ Foundation: ReactJS는 오픈 소스 컴포넌트 기반 프레임워크입니다. Java페이스북(현재 Meta)에서 개발한 스크립트 라이브러리로, 빠르고 상호작용적인 사용자 인터페이스를 구축하는 데 사용됩니다.
🧩 구성 요소 : 함수나 클래스로 작성된 재사용 가능한 구성 요소는 UI 로직을 독립적이고 유지 관리하기 쉬운 부분으로 분리합니다.
📝 JSX: A Java스크립트 구문 확장을 사용하면 동일한 파일 내에서 HTML과 유사한 마크업 및 표현식을 작성할 수 있습니다.
🔄 주 및 소품: `state`는 컴포넌트 내부에 비공개로 변경되는 데이터를 저장하는 반면, `props`는 읽기 전용 데이터를 전달합니다.
⚙️ 설정 경로: CDN 스크립트 태그는 빠른 실험에 적합하고, npm 패키지나 Vite는 실제 프로젝트에 적합합니다.
🚀 현대적 관행: Hooks와 React 18+의 createRoot API를 사용하는 함수형 컴포넌트가 이제 권장되는 표준입니다.
💼 경력 영향: React 기술은 전 세계 프론트엔드 개발자 채용 공고에서 가장 많이 요구되는 기술 중 하나입니다.

ReactJS는 무엇입니까?

ReactJS 오픈 소스 프런트 엔드입니다 Java사용자 인터페이스를 구축하기 위한 스크립트 라이브러리. ReactJS Meta(이전 페이스북)와 개인 개발자 및 기업 커뮤니티에 의해 유지 관리됩니다. 단일 페이지 애플리케이션 및 모바일 애플리케이션 개발의 기반으로 널리 사용됩니다. 사용이 매우 간편하며, 사용자가 재사용 가능한 UI 구성 요소를 만들 수 있도록 지원합니다.

React 코드를 처음 작성하기 전에, 이 라이브러리가 일반 프로그래밍 언어와 어떻게 다른지 아는 것이 도움이 됩니다. Java스크립트. 다음 섹션에서는 핵심 기능을 자세히 살펴봅니다.

ReactJS의 특징

JSX: JSX는 확장 기능입니다. Java스크립트. React에서 JSX를 사용하는 것이 필수는 아니지만, 유용한 기능 중 하나이며 사용하기도 쉽습니다.

구성 요소 : 구성 요소는 순수함과 같습니다 Java스크립트 함수는 로직을 재사용 가능한 독립적인 코드로 분리하여 코드를 쉽게 작성할 수 있도록 도와줍니다. 컴포넌트는 함수처럼 사용할 수도 있고 클래스처럼 사용할 수도 있습니다. 컴포넌트는 상태(state)와 속성(props)을 가지므로 사용이 편리합니다. 클래스 컴포넌트 내부에서는 상태와 속성이 관리됩니다.

가상 DOM: React는 가상 DOM, 즉 메모리 내 데이터 구조 캐시를 생성합니다. 최종 변경 사항만 나중에 브라우저의 DOM에 업데이트되므로 렌더링 속도가 빠릅니다.

Java스크립트 표현식: JSX 파일에서는 중괄호({})를 사용하여 JS 표현식을 사용할 수 있습니다.

ReactJS의 장점

ReactJS 사용의 주요 장점은 다음과 같습니다.

ReactJS는 메모리 내 데이터 구조 캐시를 활용하는 가상 DOM을 사용하며, 최종 변경 사항만 브라우저의 DOM에 업데이트됩니다. 이로 인해 앱 속도가 향상됩니다.
React의 컴포넌트 기능을 사용하면 원하는 컴포넌트를 직접 만들 수 있습니다. 이러한 컴포넌트는 재사용이 가능하며 코드 유지 관리에도 도움이 됩니다.
ReactJS는 오픈 소스입니다. Java스크립트 라이브러리라서 쉽게 시작할 수 있습니다.
ReactJS는 단기간에 매우 인기를 얻었으며 페이스북과 같은 제품에 사용되고 있습니다. Instagram애플과 같은 많은 유명 기업에서 사용하고 있습니다. Netflix등
Meta는 ReactJS 라이브러리를 유지 관리하므로, 잘 관리되고 지속적으로 업데이트됩니다.
ReactJS는 데스크톱과 모바일 앱 모두를 위한 풍부한 UI를 개발하는 데 사용할 수 있습니다.
대부분의 코딩이 다음에서 수행되므로 디버그 및 테스트가 쉽습니다. JavaScript HTML 형식이 아니라.

ReactJS의 단점

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

대부분의 코드는 JSX로 작성되었으며, 즉 HTML과 CSS는 JSX의 일부입니다. Java스크립트. 다른 대부분의 프레임워크가 kee를 선호하기 때문에 다소 혼란스러울 수 있습니다.ping HTML은 별도로 Java스크립트 코드.
ReactJS의 파일 크기는 비교적 큽니다.

장단점을 파악했으니 이제 React를 설정할 준비가 되었습니다. 가장 빠르게 사용해 보는 방법은 CDN에서 직접 실행하는 것인데, 이 부분을 먼저 다루고, 실제 프로젝트를 위한 npm 기반 설정은 그 후에 설명합니다.

CDN에서 ReactJS 사용

React를 사용하려면 먼저 페이지에 ReactJS를 추가해야 합니다. CDN을 이용하면 ReactJS를 쉽게 시작할 수 있습니다. Java아래와 같은 스크립트 파일입니다.

기존 React 문서 사이트로 이동하여 CDN 링크를 확인하세요. https://legacy.reactjs.org/docs/cdn-links.html그러면 다음 이미지에 설명된 필수 파일을 받게 됩니다.

개발자용

<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 모두에 원하는 React 버전을 지정하세요. 이 페이지에서는 버전 16을 사용하므로 아래 예제는 수정 없이 실행됩니다.

💡 참고: 이 UMD/CDN 빌드 방식은 React 18까지 사용 가능한 기존 방식이며 학습용으로는 여전히 적합합니다. React 19부터는 UMD 빌드가 제공되지 않으며, React 18 이상 버전에서는 다른 방식으로 대체되었습니다. ReactDOM.render 과 createRoot — 이 페이지 하단의 React 버전 관련 섹션을 참조하세요.

CDN 파일을 사용할 계획이라면 도메인 간 충돌 문제를 방지하기 위해 crossorigin 속성을 유지해야 합니다. ReactJS 코드는 브라우저에서 직접 실행할 수 없으므로 Babel을 사용하여 일반 JavaScript 코드로 트랜스파일링해야 합니다. Java브라우저에서 실행하기 전의 스크립트입니다.

사용할 수 있는 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 패키지 사용

Node.js가 설치되어 있는지 확인하세요. 설치되어 있지 않다면 Node.js 설치 튜토리얼을 참조하세요.https://www.guru99.com/node-js-tutorial.html) 설치.

Node.js를 설치했으면 폴더를 생성하세요. 반응 프로젝트/.

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

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

reactproj\
package.json

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

다음은 ReactJS용 패키지 목록입니다. React는 버전 16으로 고정되어 있습니다. ReactDOM.render 이 페이지의 예제는 표시된 대로 정확하게 실행됩니다.

npm install react@16 --save
npm install react-dom@16 --save
npm install react-scripts --save

명령 프롬프트를 열고 reactproj/ 폴더 안에서 위의 명령어를 실행하세요.

폴더 만들기 src / 모든 JavaScript 코드가 들어갈 위치입니다. ReactJS 프로젝트의 모든 코드는 src/ 폴더에 있습니다. 아래와 같이 index.js 파일을 생성하고 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를 가진 DOM 요소에도 ID가 부여됩니다. 이는 아래와 같이 시작 파일인 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>

`react-scripts` 패키지는 코드 컴파일과 서버 시작을 통해 HTML 파일(예: index.html)을 표시하는 작업을 처리합니다. 아래와 같이 `package.json` 파일에 `react-scripts`를 사용하여 코드를 컴파일하고 서버를 시작하도록 하는 명령어를 추가해야 합니다.

 "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",
  "dependencies": {
    "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>

우리는 동일한 프로세스를 사용하여 실행할 것입니다. Java다음 장에서도 스크립트 파일에 대해 다룹니다. 모든 .js 및 .jsx 파일을 src/ 폴더에 추가하세요. 파일 구조는 다음과 같습니다.

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

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

이 ReactJS 튜토리얼에서는 첫 번째 React 애플리케이션을 시작하는 방법에 대한 단계별 가이드를 제공합니다.

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

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

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

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

ReactDOM.render(

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

ReactDOM.렌더링 추가하겠습니다 ID가 'root'인 요소에 태그를 추가하려고 합니다. 다음은 저희가 가지고 있는 HTML 파일입니다.

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

단계 3) 컴파일하세요 Code.

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

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

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

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

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

최종 파일을 컴파일하려면 다음 명령을 실행하십시오.

npm run start

위 명령어를 실행하면 파일이 컴파일되고 오류가 있을 경우 알려줍니다. 모든 것이 정상적이면 브라우저가 열리고 해당 페이지가 실행됩니다. http://localhost:3000/

명령: npm 실행 시작:

C:\reactproj>npm run start

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

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

Vite를 사용하여 React를 설정하는 방법(최신 방식)

위의 react-scripts 설정은 수년간 표준 스타터였던 Create React App(CRA)에서 가져온 것입니다. React 팀은 2025년 2월에 Create React App 사용을 공식적으로 중단했으므로, 새로운 프로젝트에서는 최신 빌드 도구를 사용하는 것이 좋습니다. 현재 가장 인기 있는 선택지는 다음과 같습니다. 물다이는 시작 속도가 더 빠르고 생성되는 빌드 크기가 더 작습니다.

Vite를 사용하여 새 React 프로젝트를 만드는 방법은 다음과 같습니다.

단계 1) 터미널에서 스캐폴딩 명령을 실행하세요.

npm create vite@latest my-react-app -- --template react

단계 2) 해당 폴더로 이동하여 필요한 패키지를 설치하세요.

cd my-react-app
npm install

단계 3) 개발 서버를 시작하세요:

npm run dev

Vite는 다음 위치에서 앱을 제공합니다. http://localhost:5173/ 기본적으로 설정되어 있으며 파일을 저장할 때 즉시 다시 로드됩니다.

이 페이지의 이전 설정과의 주요 차이점은 다음과 같습니다.

진입 파일은 다음과 같습니다. src/main.jsx src/index.js 대신에.
최신 React를 설치합니다. 루트 생성 ReactDOM.render 대신에.
index.html 파일은 public/ 폴더가 아닌 프로젝트 루트에 있습니다.
빌드는 다음을 사용하여 생성됩니다. npm run build dist/ 폴더에 넣으세요.

라우팅 및 서버 렌더링과 같은 풀스택 요구 사항을 충족하기 위해 React 팀은 다음과 같은 프레임워크도 권장합니다. 다음 .js아래 장에서 배우는 모든 내용(JSX, 컴포넌트, 상태, 속성)은 Vite 또는 Next.js 프로젝트에서도 변경 없이 그대로 적용됩니다.

JSX 란 무엇입니까?

JSX는 확장 기능입니다. Java스크립트입니다. HTML을 사용할 수 있는 강력한 기능을 제공하는 템플릿 스크립트입니다. Java함께 스크립트를 작성하세요.

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

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

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

UI를 구현하려면 HTML이 필요하며, DOM의 각 요소에는 처리해야 할 이벤트, 상태 변화 등이 있습니다.

React의 경우, HTML을 활용할 수 있게 해줍니다. Java스크립트를 같은 파일에 작성하고 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에서의 표현식은 다음과 같습니다. Java스크립트 표현식.

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')
);

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

위 스크린샷에서 볼 수 있듯이 {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에서 test.jsx 파일을 사용할 것입니다. 우리가 원하는 것은 h1태그 index.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의 구성 요소는 무엇입니까?

구성 요소는 순수함과 같습니다. Java스크립트 함수는 로직을 재사용 가능한 독립적인 코드로 분리하여 코드 작성을 간소화하는 데 도움을 줍니다.

기능으로서의 구성요소

테스트.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 변수이며, 동일한 변수가 export를 사용하여 내보내집니다.

이제 아래와 같이 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 예제입니다.

테스트.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')
);

Hello 컴포넌트는 HTML 태그로 사용됩니다. 즉, .

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

클래스 컴포넌트와 함수 컴포넌트 및 훅의 차이점

이제 컴포넌트를 작성하는 두 가지 방법을 모두 살펴보았습니다. 그렇다면 어떤 방법을 사용해야 할까요? 이 페이지에서는 클래스 컴포넌트를 소개합니다. 클래스 컴포넌트는 상태와 생명주기 개념을 명확하게 보여주기 때문에 초보자에게 유용하며, 기존 코드베이스에서도 여전히 많이 사용됩니다. 하지만 React 16.8 버전부터 Hooks가 도입되면서 함수 컴포넌트도 상태를 관리할 수 있게 되었고, 이제는 모든 새로운 코드에서 함수 컴포넌트 작성을 권장합니다.

아래	클래스 구성 요소	훅을 사용하는 함수 컴포넌트
주 정부	this.state와 this.setState()	useState() 후크
주기	componentDidMount, componentDidUpdate, componentWillUnmount	useEffect() 훅은 이 세 가지 모두를 다룹니다.
통사론	추가적인 상용구 코드(생성자, 바인딩, this)	더 짧게, 이 키워드는 아닙니다.
Status	지원되는 레거시 스타일	새 코드에 권장됩니다.

다음은 이 페이지의 상태 예제를 useState 훅을 사용하여 다시 작성한 예입니다.

import React, { useState } from 'react';

function Hello() {
  const [msg] = useState("Hello, from Guru99 Tutorials!");
  return <h1>{msg}</h1>;
}
export default Hello;

두 버전 모두 동일한 출력을 생성합니다. 아래 장에서 사용되는 클래스 구문을 익힌 다음, 각 예제를 Hooks로 변환하는 연습을 해보세요.

ReactJS의 상태란 무엇입니까?

국가란 JavaReactJS 렌더링에 사용될 데이터를 저장하는 스크립트 객체로, 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의 Prop은 무엇입니까?

Props는 컴포넌트 내부에서 사용될 속성입니다. 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')
);

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

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

클래스의 속성에 접근하려면 다음과 같이 하면 됩니다.

테스트.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;

The 메시지 속성은 다음과 같이 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를 단계별로 배우세요

구성요소의 수명주기

컴포넌트, 상태, 속성에 대해 알아보았으니, 다음 단계는 React가 컴포넌트의 메서드를 언제 호출하는지 이해하는 것입니다. 컴포넌트 생명주기는 초기화, 마운트, 업데이트, 언마운트 단계로 나뉩니다.

각 단계에 대한 자세한 설명은 다음과 같습니다.

ReactJS의 컴포넌트는 다음과 같은 단계를 거칩니다.

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

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

설치이 단계에서는 컴포넌트가 DOM 내부에 렌더링됩니다. 마운팅 상태에서는 다음과 같은 메서드에 접근할 수 있습니다.

render(): 생성된 모든 컴포넌트에 대해 이 메서드를 사용할 수 있습니다. 이 메서드는 HTML 노드를 반환합니다.
componentDidMount(): 이 메서드는 컴포넌트가 DOM에 추가된 직후에 호출됩니다.

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

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

shouldComponentUpdate(): 컴포넌트를 다시 렌더링하기 전에 호출됩니다. 이 메서드를 통해 컴포넌트를 업데이트할지 여부를 결정할 수 있습니다. true를 반환하면 컴포넌트가 다시 렌더링됩니다.
componentDidUpdate(): 컴포넌트가 업데이트된 후에 호출됩니다.

마운트 해제: 이 상태는 해당 구성 요소가 더 이상 필요하지 않거나 제거될 때 발생합니다.

다음은 마운트 해제 상태에서 사용할 수 있는 메서드입니다.

componentWillUnmount(): 컴포넌트가 제거되거나 파괴되기 직전에 호출됩니다.

생명주기 방법론의 실제 적용 사례

다음은 각 단계에서 호출되는 메서드를 보여주는 작동 예시입니다.

예: 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는 이를 위해 특별한 메서드를 제공합니다. setState이는 변경 사항이 발생할 때마다 상태를 유지하는 데 도움이 됩니다. 실제 응용 프로그램에서는 이 또한 호출됩니다. event.preventDefault() formSubmit 메서드 안에 코드를 넣어 제출 시 브라우저가 페이지를 새로고침하지 않도록 합니다.

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

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) 텍스트 상자에 이름을 입력하세요:

단계 2) 제출 버튼을 클릭하세요:

ReactJS에서 이벤트 작업

폼은 사용자 상호작용의 여러 원천 중 하나일 뿐입니다. ReactJS에서 이벤트를 다루는 방식은 기존 방식과 동일합니다. Java스크립트. 에서 사용되는 모든 이벤트 핸들러를 사용할 수 있습니다. Java스크립트. 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는 이를 위해 다음과 같은 기능을 제공합니다. setState 이 방법은 변경 사항이 발생할 때마다 상태를 유지하는 데 도움이 됩니다.

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

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 태그에 '빨간색' 스타일을 추가했습니다.

index.js

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

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

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

위 예시에서처럼 원하는 스타일을 가진 객체를 생성하고 표현식을 사용하여 해당 스타일을 요소에 추가할 수 있습니다.

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>
  </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 속성에는 클래스 세부 정보가 제공됩니다. JSX는 이를 사용한다는 점에 유의하십시오. className HTML의 class 속성 대신에, class는 예약어이기 때문입니다. Java스크립트입니다. 이제 브라우저에서 테스트해 보겠습니다.

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

보시는 바와 같이 class="h1tag"가 h1 태그에 성공적으로 추가되었습니다.

ReactDOM.render가 createRoot로 대체된 이유는 무엇인가요?

이 페이지의 모든 예제는 ReactDOM.render를 사용하여 앱을 마운트하는데, 이는 이 강좌에서 대상으로 하는 React 16 및 17 버전에 적합합니다. 2022년 3월에 출시된 React 18에서는 해당 진입점이 createRoot API로 대체되었고, React 19에서는 ReactDOM.render가 완전히 제거되었습니다. 그 이유는 동시성 때문입니다. createRoot를 사용하면 React는 여러 버전의 UI를 동시에 준비하고, 우선순위가 낮은 렌더링을 중단하고, 우선순위가 높은 작업을 유지할 수 있습니다.ping 애니메이션도 부드럽게 실행됩니다. 자동 일괄 처리, useTransition, 서스펜스 기반 스트리밍과 같은 기능들은 모두 이 기능에 의존합니다.

이 페이지 전체에서 사용된 index.js의 현대적인 버전은 다음과 같습니다.

import { createRoot } from 'react-dom/client';

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

여기서 배운 나머지 모든 것, 즉 컴포넌트, JSX, 상태, 속성 및 이벤트는 진입점의 이 한 줄 변경 후에도 동일하게 작동합니다. 이와 같은 버전 차이는 자주 발생합니다. React JS 면접 질문그러므로 두 API를 모두 이해하는 것이 좋습니다.

자주 묻는 질문

ReactJS는 라이브러리이지 완전한 프레임워크가 아닙니다. 사용자 인터페이스 구축에만 초점을 맞추고 있습니다. 라우팅, 데이터 가져오기, 서버 렌더링 등의 처리는 React Router와 같은 도구나 프레임워크를 함께 사용하여 구현합니다. 다음 .js.

고체로 Java스크립트 기초는 대부분의 학습자가 2~4주 정도 꾸준히 연습하면 컴포넌트, JSX, 상태, 속성 등을 익힐 수 있습니다. 하지만 Hooks, 라우팅, API 호출 등을 포함한 실무 중심의 학습은 보통 2~3개월 정도 소규모 프로젝트를 진행하면서 익혀야 합니다.

ReactJS는 브라우저 DOM에 렌더링하여 웹사이트를 구축하는 반면, React Native는 동일한 컴포넌트 모델을 사용하여 네이티브 iOS 및 iOS 앱을 구축합니다. Android 앱들 간에 기술은 서로 통용되지만, React Native는 HTML 태그를 네이티브 UI 구성 요소로 대체합니다.

예. 예를 들어 보조원들 GitHub 부조종사 ChatGPT 컴포넌트 구조를 설계하고, 오류를 설명하며, 클래스 컴포넌트를 Hooks로 변환할 수 있습니다. AI가 ReactDOM.render와 같이 더 이상 사용되지 않는 API를 제안할 수 있으므로 생성된 코드는 항상 검토해야 합니다.

단기적으로는 가능성이 낮습니다. AI는 일상적인 코딩 작업을 가속화하지만, 컴포넌트 아키텍처 설계, 애플리케이션 전반의 상태 관리, 접근성 검토, 그리고 운영상의 문제 디버깅에는 여전히 개발자가 필요합니다. React 학습과 AI 지원 워크플로는 개발자의 가치를 떨어뜨리는 것이 아니라 오히려 높여줍니다.

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

초보자를 위한 ReactJS 튜토리얼

ReactJS는 무엇입니까?

ReactJS의 특징

ReactJS의 장점

ReactJS의 단점

CDN에서 ReactJS 사용

개발자용

자극용

NPM 패키지 사용

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

Vite를 사용하여 React를 설정하는 방법(최신 방식)

JSX 란 무엇입니까?

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

JSX의 표현식

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

기능으로서의 구성요소

구성요소로서의 클래스

클래스 컴포넌트와 함수 컴포넌트 및 훅의 차이점

ReactJS의 상태란 무엇입니까?

상태의 예

ReactJS의 Prop은 무엇입니까?

함수 구성요소에 대한 소품

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

구성요소의 수명주기

생명주기 방법론의 실제 적용 사례

양식 작업

ReactJS에서 이벤트 작업

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

ReactJS에서 외부 CSS로 작업하기

ReactDOM.render가 createRoot로 대체된 이유는 무엇인가요?

자주 묻는 질문

이 게시물을 요약하면 다음과 같습니다.

뉴스레터 신청하기

ReactJS는 무엇입니까?

ReactJS의 특징

ReactJS의 장점

ReactJS의 단점

관련 기사

CDN에서 ReactJS 사용

개발자용

자극용

NPM 패키지 사용

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

Vite를 사용하여 React를 설정하는 방법(최신 방식)

JSX 란 무엇입니까?

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

JSX의 표현식

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

기능으로서의 구성요소

구성요소로서의 클래스

클래스 컴포넌트와 함수 컴포넌트 및 훅의 차이점

ReactJS의 상태란 무엇입니까?

상태의 예

ReactJS의 Prop은 무엇입니까?

함수 구성요소에 대한 소품

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

구성요소의 수명주기

생명주기 방법론의 실제 적용 사례

양식 작업

ReactJS에서 이벤트 작업

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

ReactJS에서 외부 CSS로 작업하기

ReactDOM.render가 createRoot로 대체된 이유는 무엇인가요?

자주 묻는 질문

이 게시물을 요약하면 다음과 같습니다.

뉴스레터 신청하기