onClick

간단하게 데이터 넘기는 방법으로

  NameClick = (e) => {
    console.log(e);
    alert(e);
  };

 <td
    style={{ fontSize: "20px" }}
    onClick={() => this.NameClick(item.name)}>
  {item.name}</td>

이렇게 간단히 넘길수 있다
우선적으로 이거 하나만 적겠습니다.
하나하나 조금씩 정리를 하겠습니다.

props

component 간에 데이터 넘길때 props 를 사용한다 .

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" />
  );
}

export default App;

import React from 'react';

function Hello(props) {
  return <div>안녕하세요 {props.name}</div>
}

export default Hello;

여러개 props 전달

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" color="red"/>
  );
}

export default App;

import React from 'react';

function Hello(props) {
  return <div style={{ color: props.color }}>안녕하세요 {props.name}</div>
}

export default Hello;