면접질문 - React(7): React 컴포넌트 커뮤니케이션

React 개발에서 컴포넌트 통신은 다양한 컴포넌트가 함께 작동하여 보다 복잡한 상호 작용과 데이터 전송을 달성할 수 있게 하는 핵심 개념입니다. 공통 구성요소 통신 방법: 부모-아들, 아들-아버지

1. 아버지가 아들에게 전달하는 의사소통 방법

상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 것은 React에서 가장 일반적인 통신 형태입니다. 이 접근 방식은 상위 구성 요소에서 직계 하위 구성 요소로 데이터를 전달하는 데 적합합니다.

구현 방법:
하위 구성 요소에 속성(props)을 추가하여 데이터를 전달합니다.

예:

상위 구성 요소

import React from 'react';
class ParentComponent extends React.Component {
  render() {
    const message = "Hello from parent!";
    return <ChildComponent message={message} />;
  }
}

하위 어셈블리

import React from 'react';
class ChildComponent extends React.Component {
  render() {
    return <p>{this.props.message}</p>;
  }
}

위의 예에서 데이터는 속성을 ParentComponent통해 전달되며 하위 구성 요소는 이 데이터에 액세스하여 렌더링할 수 있습니다.messageChildComponentthis.props

2. 아들과 아버지의 의사소통

하위 구성 요소에서 상위 구성 요소로 데이터를 전달하거나 이벤트를 실행하는 것은 또 다른 일반적인 통신 형태입니다. 이 접근 방식은 하위 구성 요소가 상위 구성 요소에 데이터를 전달해야 하는 상황에 적합합니다.

구현 방법:
하위 구성요소 내부에 콜백 함수를 정의한 후 이 콜백 함수를 하위 구성요소에 전달하면 하위 구성요소가 적절한 시점에 이 함수를 호출하여 데이터를 전송합니다.

예:

상위 구성 요소

import React from 'react';
class ParentComponent extends React.Component {
  handleDataFromChild(data) {
    console.log("Data from child:", data);
  };

  render() {
    return <ChildComponent onDataReady={data => this.handleDataFromChild(data)} />;
  }
}

하위 어셈블리

import React from 'react';
class ChildComponent extends React.Component {
  sendDataToParent() {
    const data = "Data from child!";
    this.props.onDataReady(data);
  };

  render() {
    return <button onClick={() => this.sendDataToParent()}>Send Data</button>;
  }
}

위의 예에서 콜백 함수는 props를 ChildComponent통해 onDataReady상위 구성 요소에 전달됩니다 . 하위 구성 요소 내부의 버튼을 클릭하면 이 콜백 함수가 호출되고 데이터가 상위 구성 요소로 전달됩니다.

3. 적용사례

다음은 아버지와 아들, 아들과 아버지의 의사소통 방법의 적용을 보여주기 위해 실제 적용 사례를 사용합니다.

상위 구성 요소

import React, { Component } from 'react'
class ParentComponent extends Component {
  constructor() {
    super()
    this.state = {
      tabs: ["首页", "热门", "我的"],
      curIndex: 0
    }
  }
  tabClick(ind) {
    this.setState({ curIndex: ind })
  }
  render() {
    const {tabs, curIndex} = this.state
    return (
      <div className="App">
        <ChildComponent tabs={tabs} tabClick={(ind) => this.tabClick(ind)} />
        <h2>{tabs[curIndex]}</h2>
      </div>
    );
  }
}

하위 어셈블리

import React, { Component } from 'react'
class ChildComponent extends Component {
  constructor() {
    super() 
    this.state = {
      currentIndex: 0
    }
  }
  changeTab(ind) {
    this.setState({ currentIndex: ind })
    this.props.tabClick(ind)
  }
  render() {
    const { tabs } = this.props
    const { currentIndex } = this.state
    return (
      <div>
        <ul className='tabUl'>
          {
            tabs.map((item, ind) => {
              return(
                <li 
                  key={item} 
                  className={`${currentIndex === ind ? "active" : ''}`}
                  onClick={e => this.changeTab(ind)}
                >
                  <span>{item}</span>
                </li>
              )
            })
          }
        </ul>
      </div>
    )
  }
}

위의 예에서는 탭 전환 효과가 구현되는데, 부모 컴포넌트는 자식 컴포넌트에 정보를 전달하고, 자식 컴포넌트는 클릭한 탭의 첨자를 전달하도록 콜백을 트리거하여 전환 효과를 구현합니다.

첫 장