프로그래밍 「 자바스크립트 편」단순화 3 React 핵심 개념 (구성 요소, 소품 및 상태)

 

1. 구성 요소 :

구성 요소는 React 애플리케이션의 빌딩 블록입니다. 재사용 가능하고 독립적이며 UI 기능을 캡슐화합니다. React 구성 요소는 기능 구성 요소와 클래스 구성 요소의 두 가지 유형으로 분류할 수 있습니다.

기능적 구성 요소: 기능 구성 요소는 React 요소를 반환하는 JavaScript 함수입니다. 일반적으로 상태 또는 수명 주기 메서드를 관리할 필요가 없는 더 간단한 구성 요소에 사용됩니다. 함수형 구성 요소는 props(다음에 자세히 설명)를 입력으로 받아들이고 구성 요소의 UI를 정의하는 JSX(JavaScript XML)를 반환합니다.

기능 구성 요소의 예:

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

클래스 구성 요소: 클래스 구성 요소는 클래스를 확장하는 JavaScript 클래스입니다. 로컬 상태 관리 및 수명 주기 방법과 같은 추가 기능을 제공합니다. 클래스 구성 요소는 구성 요소의 동작을 더 세밀하게 제어해야 하거나 복잡한 상태를 관리해야 할 때 사용됩니다.React.Component

클래스 구성 요소의 예:

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

성분 구성: 컴포넌트 컴포지션은 여러 컴포넌트를 결합하여 복잡한 UI 구조를 만들 수 있는 React의 강력한 개념입니다. 구성 요소를 서로 중첩하여 재사용 가능한 모듈식 구성 요소의 계층 구조를 구축할 수 있습니다.

• 부모 구성 요소는 props를 통해 데이터와 동작을 자식 구성 요소에 전달할 수 있습니다.
• 자식 구성 요소는 기능 구성 요소이거나 클래스 구성 요소 자체일 수 있습니다.
• UI를 더 작고 재사용 가능한 구성 요소로 분할하여 코드 재사용성, 가독성 및 유지 관리 용이성을 향상시킬 수 있습니다.

구성 요소 구성의 예:

function App() {
  return (
    <div>
      <Header />
      <Content />
      <Footer />
    </div>
  );
}

이 예제에서 구성 요소는 세 개의 자식 구성 요소인 , , 및 로 구성됩니다. 각 자식 구성 요소에는 고유한 props와 논리가 있을 수 있습니다.AppHeaderContentFooter

구성 요소를 이해하는 것은 React 애플리케이션 구축의 핵심입니다. 기능 구성 요소를 선택하든 클래스 구성 요소를 선택하든 관계없이 재사용 가능하고 모듈식이며 유지 관리 가능한 UI 구조를 만들 수 있습니다. 구성 요소 구성을 사용하면 더 작은 구성 요소를 결합하여 복잡한 UI 계층을 빌드할 수 있습니다.

 

2. 소품:

props(properties의 줄임말)는 부모 구성 요소에서 자식 구성 요소로 데이터를 전달하는 데 사용됩니다. 읽기 전용이며 구성 요소 내에서 수정해서는 안 됩니다. props는 호출하는 동안 구성 요소에 속성으로 전달됩니다.

부모 구성 요소는 props에 대해 서로 다른 값을 제공하여 자식 구성 요소를 사용자 지정할 수 있습니다. 자식 구성 요소는 props를 함수 인수(기능 구성 요소의 경우) 또는 클래스 인스턴스의 속성(클래스 구성 요소의 경우)으로 받습니다.

소품 사용의 예:

// Parent component
function App() {
  return <Greeting name="John" />;
}

// Child component
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

이 예에서 부모 구성 요소는 값이 "John"인 prop을 자식 구성 요소에 전달합니다. 그런 다음 구성 요소는 "Hello, John!"을 렌더링합니다.AppnameGreetingGreeting

props를 사용하면 구성 요소를 재사용할 수 있고 부모 구성 요소에서 전달한 다양한 데이터 또는 구성에 동적으로 적응할 수 있습니다.

변경할 수 없고 읽기 전용: props는 읽기 전용이며 자식 구성 요소 내에서 수정해서는 안 됩니다. 이는 변경할 수 없도록 설계되었으며, 이는 구성 요소의 수명 주기 동안 값이 변경되지 않아야 함을 의미합니다. 소품을 직접 수정하려고 하면 다시 렌더링이 트리거되지 않으며 예기치 않은 동작이 발생할 수 있습니다. React는 데이터가 부모에서 자식으로 전달되고 자식이 수정할 수 없는 단방향 데이터 흐름을 따릅니다.

구조화 소품: 구성요소 내의 개별 props에 대한 접근을 단순화하기 위해, destructuring assignment를 사용할 수 있습니다. 이렇게 하면 개체에서 특정 소품을 추출할 수 있습니다. 예를 들면 다음과 같습니다.props

function Greeting({ name, age }) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
    </div>
  );
}

소품 구조화는 컴포넌트 내에서 특정 소품을 추출하고 사용할 수 있는 편리한 방법을 제공합니다. 코드를 단순화하고 또는 의 반복적인 사용을 방지하여 가독성을 향상시킵니다. props의 이름을 바꾸고 필요한 경우 기본값을 제공할 수도 있습니다. 구조화 소품을 활용하면 구성 요소 코드를 보다 간결하고 표현력 있게 만들 수 있습니다.props.nameprops.age

 

3. 상태:

상태는 구성 요소의 내부 데이터를 나타냅니다. 부모 구성 요소에서 전달되는 props와 달리 상태는 구성 요소 자체 내에서 관리됩니다. 상태를 통해 구성 요소는 데이터 변경을 추적하고 상태가 수정될 때 UI 업데이트를 트리거할 수 있습니다.

클래스 구성 요소는 개체를 사용하여 상태를 정의하고 관리합니다. 를 사용하여 상태가 업데이트되면 React는 UI의 변경 사항을 반영하여 구성 요소를 다시 렌더링합니다.this.statethis.setState()

상태 사용의 예:

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

이 예제에서 구성 요소의 자체 상태는 0으로 초기화됩니다. 이 메서드는 상태의 현재 개수 값을 표시하고, "Increment" 단추를 클릭하면 이벤트 처리기가 개수를 증가시켜 상태를 업데이트합니다. 그런 다음 React는 구성 요소를 다시 렌더링하여 업데이트된 카운트 값을 표시합니다. 상태를 업데이트하고 다시 렌더링을 트리거하려면 다음 메서드를 사용합니다CountercountrenderonClicksetState()

상태를 관리함으로써 React 구성 요소는 사용자 상호 작용을 처리하고 이벤트에 응답할 수 있습니다

구성 요소, 소품 및 상태를 이해하고 효과적으로 활용하는 것은 동적 및 대화형 React 애플리케이션을 구축하는 데 매우 중요합니다. 이러한 개념은 React 개발의 기초를 형성하며 재사용 및 유지 관리 가능한 UI 구성 요소를 만드는 데 필수적입니다.