부모로부터 자식 메서드 호출

저는 두 개의 컴포넌트가 있다:

1. 부모 컴포넌트


2. 자식 컴포넌트

나는 Parent에서 Child의 메소드를 호출하려고 시도했지만 결과를 얻지 못했습니다:

class Parent extends Component {
  render() {
    return (
      <Child>
        <button onClick={Child.getAlert()}>클릭</button>
      </Child>
      );
    }
  }
class Child extends Component {
  getAlert() {
    alert('클릭되었습니다');
  }
 
  render() {
    return (
      <h1 ref=hello>안녕하세요</h1>
    );
  }
}

Parent에서 Child의 메소드를 호출하는 방법이 있을까요?

참고: Child와 Parent 컴포넌트는 두 개의 다른 파일에 있습니다.

답변 1

콜백 Ref API

콜백 스타일의 ref는 이를 달성하기 위한 또 다른 방법이지만, 현대의 React에서는 그렇게 흔하지는 않습니다:

const { Component } = React;
const { render } = ReactDOM;
class Parent extends Component {
  render() {
    return (
      <div>
        <Child ref={instance => { this.child = instance; }} />
        <button onClick={() => { this.child.getAlert(); }}>Click</button>
      </div>
    );
  }
}
class Child extends Component {
  getAlert() {
    alert('clicked');
  }
  render() {
    return (
      <h1>Hello</h1>
    );
  }
}
render(
  <Parent />,
  document.getElementById('app')
);

<script src=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js></script>
<div id=app></div>

const { Component } = React;
const { render } = ReactDOM;
class Parent extends Component {
  render() {
    return (
      <div>
        <Child ref={instance => { this.child = instance; }} />
        <button onClick={() => { this.child.getAlert(); }}>클릭</button>
      </div>
    );
  }
}
class Child extends Component {
  getAlert() {
    alert('클릭되었습니다');
  }
  render() {
    return (
      <h1>안녕하세요</h1>
    );
  }
}
render(
  <Parent />,
  document.getElementById('app')
);

<script src=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js></script>
<div id=app></div>

답변 2

제목: 부모에서 자식 메서드 호출하기
서론:
소프트웨어 개발에서는 객체지향 프로그래밍이 일반적으로 사용되며, 이는 다양한 클래스와 메서드의 계층 구조로 구성됩니다. 이러한 구조에서 자식 클래스는 부모 클래스의 속성과 메서드를 상속받으며, 때로는 이러한 상속 구조에서 자식 클래스의 특정 메서드를 부모 클래스에서 호출해야 할 때가 있습니다. 본 에세이에서는 부모에서 자식 메서드를 호출하는 방법과 그 중요성에 대해 설명하고자 합니다.
본론:
1. 자식 메서드 호출 방법:
가장 일반적인 방법은 인스턴스화된 자식 클래스의 객체를 생성한 다음, 부모 클래스에서 자식 메서드를 호출하는 것입니다. 이를 위해 부모 클래스에서 자식 클래스의 객체를 생성하고 해당 객체를 통해 자식 메서드를 호출할 수 있습니다.
또 다른 방법은 부모 클래스에서 자식 클래스의 인스턴스를 생성하고, 이를 자식 클래스의 타입으로 캐스트한 후 자식 메서드를 호출하는 것입니다. 이 방법은 형식적으로 자식 클래스의 객체를 생성하지 않고도 자식 메서드를 호출할 수 있어 유용합니다.
2. 부모에서 자식 메서드 호출의 중요성:
- 유지보수성 향상: 부모 클래스는 보통 공통된 기능을 가지고 있으며, 이러한 기능은 자식 클래스에도 필요한 경우가 많습니다. 따라서 부모에서 자식 메서드를 호출함으로써 동일한 기능을 중복 구현하는 것을 피하고 유지보수성을 향상시킬 수 있습니다.
- 확장성과 다형성: 자식 클래스는 부모 클래스의 일부 기능을 상속받는 동시에 자신의 독특한 기능을 추가할 수 있습니다. 이렇게 부모에서 자식 메서드를 호출함으로써 다른 자식 클래스에 대해서도 확장성과 다형성을 구현할 수 있습니다.
- 코드 효율성: 부모에서 자식 메서드를 호출함으로써 코드의 재사용성과 효율성을 높일 수 있습니다. 자식 메서드가 부모 클래스에서 호출되는 경우, 개발자는 중복된 코드를 작성하지 않고도 부모 클래스에서 구현된 기능을 활용할 수 있습니다.
결론:
부모에서 자식 메서드를 호출하는 것은 객체지향 프로그래밍에서 중요한 개념 중 하나입니다. 이를 통해 유지보수성을 향상시키고 확장성과 다형성을 구현할 수 있으며, 코드의 효율성을 높일 수 있습니다. 따라서 자식 메서드 호출은 프로그래머가 부모 클래스와 자식 클래스의 기능과 상호 작용을 최적화하는 데 도움을 줄 것입니다.