React Tutorial by Tania Rascia 한글 번역2

Props

 지금까지 우리는 제법 괜찮은 Table 컴포넌트를 만들어 봤다. 하지만 아직 데이터는 하드코드 되어 있다. 리액트의 중요한 특징 중 하나가 데이터를 다루는 방식인데, 이는 properties를 의미하는 props와 state로 대표된다. 먼저 props을 통해 데이터를 다루는 법에 대해 알아보자.

 

 먼저 TableBody에 작성했던 모든 데이터를 객체 배열형태로 App.js의 render()매서드 안에 정의해보자. 이러한 형태는 API를 통해 JSON 구조의 객체를 전달받은 경우와 비슷하다. 

const TableBody = () => {
  return <tbody />
}

class App extends Component {
  render() {
    const characters = [
      {
        name: 'Charlie',
        job: 'Janitor',
      },
      {
        name: 'Mac',
        job: 'Bouncer',
      },
      {
        name: 'Dee',
        job: 'Aspring actress',
      },
      {
        name: 'Dennis',
        job: 'Bartender',
      },
    ]

    return (
      <div className="container">
        <Table />
      </div>
    )
  }
}

 이번에는 properties를 통해 자식컴포넌트인 Table에 데이터는 전달할 것이다. 이런 방식은 data-로 시작하는 attribute에서 이루어졌던 작업과 비슷하다. 아직까지는 정해진 키워드가 없기 때문에 이런 properties는 자유롭게 이름 붙일 수 있다. 이번에는 characterData라 이름 붙이겠다. 지금 전송하는 데이터의 형태가 문자열이며 JS표현이기 때문에 중괄호 안에 담아보겠다.

return (
  <div className="container">
    <Table characterData={characters} />
  </div>
)

 이런 방식으로 데이터는 Table로 전달 되었다. 그리고 데이터를 받는 쪽에서도 처리를 해주어야 한다.

class Table extends Component {
  render() {
    const {characterData} = this.props

    return (
      <table>
        <TableHeader />
        <TableBody characterData={characterData} />
      </table>
    )
  }
}

 전에 설치해두었던 DevTools를 이용해서 Table을 검사해보면 property안에 배열형태의 데이터를 확인 할 수 있다. 이곳에 저장되어 있는 데이터는 virtual DOM으로도 알려져있다. virtual DOM은 실제 DOM과 연동되는 빠르고 효율적으로 동기화된다.

 

 위 데이터는 아직 실제 DOM에 동기화되지 않았다. Table컴포넌트에서 this.props을 통해 모든 props에 접근 할 수 있다. 이번에는 characterData라는 하나의 props만 전달하기 때문에 this.props.characterData를 통해 데이터를 불러들이면 된다.

const {characterData} = this.props

 Table 컴포넌트는 두개의 작은 컴포넌트로 이루어져 있기 때문에 다시 한 번 props을 통해 TableBody에 전달해보자.

class Table extends Component {
  render() {
    const {characterData} = this.props

    return (
      <table>
        <TableHeader />
        <TableBody characterData={characterData} />
      </table>
    )
  }
}

 지금까지는 TableBody는 아무런 인자도 받지 않으며 단지 하나의 테그만 반환한다.

const TableBody = () => {
  return <tbody />
}

 다음으로 TableBody에 props을 인자로 전달하고 array.map()매서드를 이용해 각 개체를 하나의 table 열에 담고 반환한다.

const TableBody = (props) => {
  const rows = props.characterData.map((row, index) => {
    return (
      <tr key={index}>
        <td>{row.name}</td>
        <td>{row.job}</td>
      </tr>
    )
  })

  return <tbody>{rows}</tbody>
}

 이제 앱의 화면을 보면 모든 데이터가 로딩된 것을 볼 수 있다.

 

 코드에서 각 table의 행에 key index를 하나씩 추가하였다. React에서 리스트를 생성할 때에는 반드시 key값을 사용해주어야 한다. 리스트의 각 아이템들을 처리할 때 key 값들은 중요해진다.

 

 props은 존재하는 데이터를 React 컴포넌트에 전달하는 데 있어 효율적이다. 그러나 props는 읽기 전용이기 때문에 컴포넌트는 이를 변경할 수 없다. 다음 장에서 우리는 state를 통해 어떻게 전달받은 데이터를 처리하고 관리하는지 알아 볼 것이다.