React 구성 요소 및 소품

소개

React의 컴포넌트는 애플리케이션의 빌딩 블록입니다. 모든 것을 단일 파일 아래에 두는 대신 UI 조각을 빌드하는 데 사용할 수 있는 재사용 가능한 코드 블록입니다. 또한 구성 요소는 상태, 소품 등과 같은 다른 측면을 가질 수 있습니다.

React에는 두 가지 유형의 구성 요소가 있습니다.

클래스 구성요소

기능 구성 요소

지금부터 하나하나 살펴보겠습니다.

클래스 구성요소

이름에서 알 수 있듯이 클래스 구성 요소는 React 구성 요소로 확장된 JavaScript 클래스입니다. JSX 요소를 반환하는 필수 render() 메서드가 있습니다. 이전에는 React가 대부분 클래스 기반이었기 때문에 상태를 관리하기 위한 클래스 구성 요소가 필요했습니다.

다음과 같이 표시됩니다.

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <h1>Hello World</h1>
    );
  }
}

export default App;

클래스 구성 요소는 React 후크의 도입으로 더 이상 실제로 사용되지 않습니다. 오늘날 대부분의 전문가들은 기능적 구성 요소를 사용할 것을 권장합니다.

기능성 부품

기능 구성 요소는 JSX 요소도 반환하지만 render() 메서드를 사용하지 않는 일반 JavaScript 함수입니다.

export default function App() {
  return (
   <h1>Hello World</h1>
   );
}

위의 코드는 JSX 요소를 반환하는 기능적 구성 요소입니다. 기능적 구성 요소는 보시다시피 클래스 구성 요소보다 더 쉽게 읽을 수 있습니다. 또한 클래스 구성 요소가 더 복잡할 수 있기 때문에 기능적 구성 요소로 작업하기가 더 쉽습니다. React 후크의 도입으로 이제 기능 구성 요소에서 "상태"를 선언할 수 있습니다.

반응하는 소품

구성 요소의 중요한 개념은 통신 방법입니다. React에는 속성을 의미하는 props라는 특수 객체가 있습니다. 상위 구성 요소에서 하위 구성 요소로 데이터를 전달하는 데 사용됩니다. 소품은 부모 구성 요소에서 자식 구성 요소로 단방향 흐름으로만 데이터를 전송합니다.

클래스 구성 요소에서 소품을 사용하는 방법을 살펴보겠습니다. 매우 간단한 예를 살펴보겠습니다.

import React from "react";

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

위의 코드에서 전달된 이름 속성과 함께 다음 h1 태그를 반환하는 학생 구성 요소를 만들고 있습니다. 구성 요소를 상위 구성 요소인 App.js 파일로 가져와 데이터를 전달해야 합니다.

import React from "react";
import Student from "./Student"

export default class App extends React.Component {
 render() {
  return (
   <div className="App">
    <Student name="Rex" />
   </div>
  );
 }
}

이렇게 하면 아래와 같이 구성 요소에 전달된 이름 속성이 있는 간단한 h1 태그가 반환됩니다.



이제 기능적 구성 요소에서 소품을 사용하는 방법을 살펴보겠습니다.

import React from "react";

export default function Student({firstName, lastName}) {
  return (
    <div>
      <h1>First Name: {firstName}</h1>
      <h2>Last Name: {lastName}</h2>
    </div>
  );
} 

보시다시피 부모 구성 요소에서 전달하려는 소품을 해체했습니다.

import React from "react";
import Student from "./Student";

function App() {
  return (
    <div className="App">
      <Student firstName="John" lastName="Doe" />
    </div>
  );
}

export default App;

App.js 파일에서 원하는 소품을 전달한 후 렌더링되는 내용은 다음과 같습니다.

결론

구성 요소 간에 소품을 전달하는 방법과 기능적 구성 요소가 클래스 구성 요소보다 선호되는 이유를 살펴보았습니다. 소품은 데이터를 전달하는 데 유용하지만 데이터를 조작하는 데는 유용하지 않습니다.

읽어 주셔서 감사합니다!