Angular vs React | 자식 컴포넌트로의 데이터 전달에 대해서

---

Angular의 @Input

• 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용
• 자식 컴포넌트의 속정을 정의 하고, 부모 컴포넌트에서 값을 전달할 수 있도록 한다.
• 부모 컴포넌트에서 [childProperty]="parentValue"와 같이 속성을 설정하여 자식 컴포넌트에 값을 전달한다.

// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <div>
      <app-child [childProperty]="parentValue"></app-child>
    </div>
  `,
})
export class ParentComponent {
  parentValue = '부모에서 전달한 값';
}

// child.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <div>
      <p>자식 컴포넌트 속성 값: {{ childProperty }}</p>
    </div>
  `,
})
export class ChildComponent {
  @Input() childProperty: string;
}

 

---

React의 props

• React의 props 또한 부모 컴포넌트에서 자식 컴포넌트로 값을 전달할 때 사용한다.
• props는 property의 준말로, html 태그의 attribute와 구분된다.
• React 컴포넌트는 함수나 클래스로 구현될 수 있으며, 함수형 컴포넌트는 props를 파라미터로 받아 사용하고, 클래스형 컴포넌트는 this.props를 통해 접근한다.
• 부모 컴포넌트에서 childProperty={parentValue}와 같이 속성을 지정하여 자식 컴포넌트에 값을 전달한다.

// 함수형 컴포넌트
import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <p>자식 컴포넌트 속성 값: {props.childProperty}</p>
    </div>
  );
}

// 클래스형 컴포넌트
import React, { Component } from 'react';

class ChildComponent extends Component {
  render() {
    return (
      <div>
        <p>자식 컴포넌트 속성 값: {this.props.childProperty}</p>
      </div>
    );
  }
}

// 부모 컴포넌트
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const parentValue = '부모에서 전달한 값';

  return (
    <div>
      <ChildComponent childProperty={parentValue} />
    </div>
  );
}