[React] 리액트 데이터 전달하기 (props)

컴포넌트 간에 데이터를 전달하는 방법에 대하여 알아보도록 합시다!

 

먼저 컴포넌트를 하나 만들어 줍니다!

 

컴포넌트는 아무렇게나 만들면 됩니다

class TextCard extends React.Component {
  render() {
    return (
      <p>
        {this.props.value}
      </p>
    );
  }
}

컴포넌트를 그려주기위해 불러온 다음 아래와 같이 값을 넘겨주면 됩니다.

class Main extends React.Component {
  renderText(i) {
    return <Square value={i} />;
  }
  render() {
    return (
      <div>
        <div>
          {this.renderText(0)}
          {this.renderText(1)}
          {this.renderText(2)}
        </div>
        <div>
          {this.renderText(3)}
          {this.renderText(4)}
          {this.renderText(5)}
        </div>
        <div>
          {this.renderText(6)}
          {this.renderText(7)}
          {this.renderText(8)}
        </div>
      </div>
    );
  }
}

간단하게 props를 사용하여 데이터를 컴포넌트로 넘겨주는 방법을 알아보았습니다.