React.js의 용어 및 기능-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

React.js의 용어 및 기능

Mary-Kate Olsen

Nov 17, 2024 pm 05:36 PM

Terms and Functionality in React.js

흔히 React라고 불리는 React.js는 사용자 인터페이스, 특히 단일 페이지 애플리케이션(SPA)을 구축하는 데 사용되는 강력한 JavaScript 라이브러리입니다. 이를 통해 개발자는 복잡한 UI를 더 작고 재사용 가능한 구성 요소로 나누어서 만들 수 있습니다. React의 강력한 기능을 최대한 활용하려면 핵심 용어와 기능을 이해하는 것이 중요합니다. 이 글에서는 React.js로 작업할 때 알아야 할 몇 가지 주요 개념, 용어, 기능을 분석하겠습니다.

1. 구성품

기능 구성 요소:

함수 구성요소는 오늘날 React 구성요소를 정의하는 가장 일반적인 방법입니다. 이는 단순히 UI를 나타내는 JSX(JavaScript XML)를 반환하는 JavaScript 함수입니다. 함수 구성요소는 React Hooks를 사용하여 상태 및 부작용을 관리할 수도 있습니다.

function Greeting() {
  return <h1>Hello, World!</h1>;
}

로그인 후 복사

클래스 구성요소:

React Hooks가 도입되기 전에는 클래스 구성 요소가 구성 요소 상태 및 수명 주기 메서드를 관리하는 주요 방법이었습니다. 여전히 널리 사용되고 있지만 이제는 후크가 있는 기능 구성 요소가 선호되는 방법입니다.

class Greeting extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

로그인 후 복사

2. JSX(자바스크립트 XML)

JSX는 JavaScript 내에서 HTML과 유사한 코드를 직접 작성할 수 있게 해주는 JavaScript용 구문 확장입니다. React는 JSX를 사용하여 UI가 어떤 모습이어야 하는지 설명합니다. HTML처럼 보이지만 JSX는 내부적으로 JavaScript로 컴파일됩니다.

1	`const` `element = <h1>Hello, JSX!</h1>;`

로그인 후 복사

JSX에 JavaScript 표현식을 중괄호로 묶어서 삽입할 수도 있습니다.

1 2	`const` `name =` `"React";` `const` `element = <h1>Hello, {name}!</h1>;`

로그인 후 복사

3. 상태

State는 구성 요소의 현재 상황에 대한 정보를 저장하는 데 사용되는 내장 React 객체입니다. 각 구성 요소는 자체 상태를 관리하고 해당 상태가 변경되면 다시 렌더링할 수 있습니다. 함수 구성 요소는 useState 후크를 사용하여 상태를 관리하는 반면, 클래스 구성 요소는 this.state 객체를 사용합니다.

useState(함수 구성요소)의 예:

import { useState } from 'react';
 
function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

로그인 후 복사

this.state(클래스 구성요소)의 예:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
 
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

로그인 후 복사

4. Properties(속성)

props는 한 구성 요소에서 다른 구성 요소로 데이터를 전달하는 데 사용됩니다. 이는 구성 요소가 서로 통신할 수 있도록 하는 함수 인수와 같습니다. Props는 읽기 전용이며 수신 구성요소에 의해 수정될 수 없습니다.

예:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
 
function App() {
  return <Welcome name="React" />;
}

로그인 후 복사

이 예에서 Welcome 구성 요소는 App 구성 요소로부터 name prop을 받아 "Hello, React"를 렌더링합니다.

5. 후크

후크는 함수 구성 요소의 React 상태 및 수명 주기 기능을 "연결"할 수 있는 함수입니다. 가장 일반적으로 사용되는 두 가지 후크는 다음과 같습니다.

사용상태:

함수 구성 요소에 상태를 추가할 수 있습니다.

function Greeting() {
  return <h1>Hello, World!</h1>;
}

로그인 후 복사

사용효과:

매 렌더링 후 데이터 가져오기, 구독 또는 DOM 수동 변경과 같은 부작용을 처리합니다.

class Greeting extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

로그인 후 복사

일반적으로 사용되는 다른 후크로는 useContext, useReducer, useRef 및 useCallback이 있습니다.

6. 가상 DOM

React는 실제 DOM의 경량 복사본인 Virtual DOM을 사용하여 UI 업데이트를 최적화합니다. 실제 DOM을 직접 조작하는 대신 React는 먼저 가상 DOM을 업데이트한 다음 실제 DOM을 가상 버전과 동기화하는 데 필요한 최소한의 변경 사항을 파악합니다. 이 프로세스를 조정이라고 하며 특히 대규모 애플리케이션에서 성능이 크게 향상됩니다.

7. 라이프사이클 메소드(클래스 구성요소)

수명 주기 메서드는 구성 요소 수명의 여러 단계(렌더링, 업데이트 및 마운트 해제)에 연결할 수 있는 클래스 구성 요소의 특수 메서드입니다. 몇 가지 중요한 수명 주기 방법은 다음과 같습니다.

comComponentDidMount(): 구성 요소가 DOM에 마운트된 후 한 번 호출됩니다. 초기 데이터 가져오기 또는 구독에 사용됩니다.
comComponentDidUpdate(): 다시 렌더링할 때마다 호출됩니다. 상태 또는 소품 변경에 따라 업데이트를 수행하는 데 사용됩니다.
comComponentWillUnmount(): DOM에서 구성 요소가 제거되기 직전에 호출됩니다. API 호출 취소 또는 이벤트 리스너 제거와 같은 정리 작업에 사용됩니다.

함수 구성요소에서는 useEffect를 사용하여 동일한 기능을 구현할 수 있습니다.

8. 조건부 렌더링

React에서는 상태나 소품을 기반으로 구성 요소나 요소를 조건부로 렌더링할 수 있습니다. 가장 일반적인 방법은 JavaScript의 삼항 연산자를 사용하는 것입니다.

예:

1	`const` `element = <h1>Hello, JSX!</h1>;`

로그인 후 복사

조건부 렌더링에 대한 다른 접근 방식에는 JSX에서 if 문이나 단락(&&) 사용이 포함됩니다.

9. 목록과 키

React에서는 .map() 메소드를 사용하여 요소 목록을 생성합니다. 목록의 각 항목에는 React가 렌더링을 최적화하는 데 도움이 되는 고유한 "키" 속성이 있어야 합니다.

예:

1 2	`const` `name =` `"React";` `const` `element = <h1>Hello, {name}!</h1>;`

로그인 후 복사

키는 고유하고 안정적이어야 React가 어떤 항목이 변경, 추가 또는 제거되었는지 식별할 수 있어야 합니다.

10. 양식 및 제어 구성 요소

React에서 양식은 일반적으로 제어되는 구성 요소를 사용하여 처리됩니다. 여기서 양식 요소(예: 입력)는 React 상태에 의해 제어됩니다. 이를 통해 React는 양식 요소의 값을 완전히 제어할 수 있습니다.

예:

import { useState } from 'react';
 
function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

로그인 후 복사

이 예에서 입력 값은 React 상태에 의해 제어되므로 입력 필드의 모든 변경 사항이 실시간으로 캡처됩니다.

11. 컨텍스트 API

Context API를 사용하면 모든 수준에서 수동으로 prop을 전달하지 않고도("prop 드릴링"이라고도 함) 구성 요소 간에 상태 또는 데이터를 공유할 수 있습니다. 이는 앱 전체에 걸쳐 글로벌 데이터(예: 사용자 인증 또는 테마 설정)를 전달해야 할 때 특히 유용합니다.

예:

function Greeting() {
  return <h1>Hello, World!</h1>;
}

로그인 후 복사

결론

React.js는 숙달할 수 있는 다양한 기능과 용어를 제공합니다. 구성 요소, JSX, 상태 및 소품의 기본부터 후크, 컨텍스트 및 수명 주기 방법과 같은 고급 개념에 이르기까지 React는 최신 웹 애플리케이션을 구축하기 위한 유연하고 확장 가능한 프레임워크를 제공합니다. 이러한 주요 개념과 용어를 이해하면 React의 잠재력을 최대한 활용하고 강력하고 유지 관리가 가능하며 동적 사용자 인터페이스를 구축할 수 있습니다.

위 내용은 React.js의 용어 및 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7366

자바 튜토리얼

1628

Cakephp 튜토리얼

1354

라라벨 튜토리얼

1266

PHP 튜토리얼

1214

Related knowledge

JavaScript로 문자열 문자를 교체하십시오 Mar 11, 2025 am 12:07 AM

JavaScript 문자열 교체 방법 및 FAQ에 대한 자세한 설명 이 기사는 JavaScript에서 문자열 문자를 대체하는 두 가지 방법 인 내부 JavaScript 코드와 웹 페이지의 내부 HTML을 탐색합니다. JavaScript 코드 내부의 문자열을 교체하십시오 가장 직접적인 방법은 대체 () 메소드를 사용하는 것입니다. str = str.replace ( "find", "replace"); 이 메소드는 첫 번째 일치 만 대체합니다. 모든 경기를 교체하려면 정규 표현식을 사용하고 전역 플래그 g를 추가하십시오. str = str.replace (/fi

사용자 정의 Google 검색 API 설정 자습서 Mar 04, 2025 am 01:06 AM

이 튜토리얼은 사용자 정의 Google 검색 API를 블로그 또는 웹 사이트에 통합하는 방법을 보여 주며 표준 WordPress 테마 검색 기능보다보다 세련된 검색 경험을 제공합니다. 놀랍게도 쉽습니다! 검색을 Y로 제한 할 수 있습니다

8 멋진 jQuery 페이지 레이아웃 플러그인 Mar 06, 2025 am 12:48 AM

손쉬운 웹 페이지 레이아웃에 대한 jQuery 활용 : 8 에센셜 플러그인 jQuery는 웹 페이지 레이아웃을 크게 단순화합니다. 이 기사는 프로세스를 간소화하는 8 개의 강력한 JQuery 플러그인을 강조합니다. 특히 수동 웹 사이트 생성에 유용합니다.

자신의 Ajax 웹 응용 프로그램을 구축하십시오 Mar 09, 2025 am 12:11 AM

그래서 여기 당신은 Ajax라는이 일에 대해 배울 준비가되어 있습니다. 그러나 정확히 무엇입니까? Ajax라는 용어는 역동적이고 대화식 웹 컨텐츠를 만드는 데 사용되는 느슨한 기술 그룹을 나타냅니다. 원래 Jesse J에 의해 만들어진 Ajax라는 용어

' this ' 자바 스크립트로? Mar 04, 2025 am 01:15 AM

핵심 포인트 JavaScript에서는 일반적으로 메소드를 "소유"하는 객체를 말하지만 함수가 호출되는 방식에 따라 다릅니다. 현재 객체가 없으면 글로벌 객체를 나타냅니다. 웹 브라우저에서는 창으로 표시됩니다. 함수를 호출 할 때 이것은 전역 객체를 유지하지만 객체 생성자 또는 그 메소드를 호출 할 때는 객체의 인스턴스를 나타냅니다. call (), apply () 및 bind ()와 같은 메소드를 사용 하여이 컨텍스트를 변경할 수 있습니다. 이 방법은 주어진이 값과 매개 변수를 사용하여 함수를 호출합니다. JavaScript는 훌륭한 프로그래밍 언어입니다. 몇 년 전,이 문장은있었습니다