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로 컴파일됩니다.

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

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

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의 삼항 연산자를 사용하는 것입니다.

예:

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

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

9. 목록과 키

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

예:

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!