[React] 리액트에서 컴포넌트 간 데이터의 전달 방법은 어떻게 될까?

일단, React의 데이터 흐름은 단방향이다.

단방향 = 한 방향 = 위에서 아래로 내려간다 

즉, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 넘겨주는게 일반적이다.

부모 컴포넌트는(상위 컴포넌트)는 컴포넌트들을 사용하는 컨테이너 개념이다.

즉, A 컴포넌트가 B컴포넌트와 C컴포넌트를 import하여 브라우저에 보여준다면,

A 컴포넌트가 부모, B와 C가 자식 컴포넌트라고 할 수 있다.

1. 부모 컴포넌트에서 자식 컴포넌트에 값(데이터) 넘기기. 

이것이 가장 일반적인 방법이다.

create-react-app으로 리액트 프로젝트를 생성했다면, App.js가 최상위 컴포넌트라는 것을 알고 있을 것이다.

그리고, Todos.js라는 컴포넌트를 생성을 했다고 가정하면,

부모인 App.js 에 있는 데이터(state 뿐만 아니라 함수도...)를 

자식인 Todos로 보낼 수 있다. 

HTML에서 속성(Attribute)을 선언하는 식으로 "props"를 전달한다.

import React, { Component } from "react";

import "./App.css";

import Todos from "./components/Todos";

class App extends Component {

state = {

name: "JANG"

};

render() {

return (

<div className="App">

<h1>App Page</h1>

<Todos name={this.state.name} />

</div>

);

}

}

export default App;

위 예제에서, <Todos name={this.state.name} /> 이렇게 하면, Todos로 문자열 JANG을 보낸 것이다.

이런식으로 여러개의 데이터 값들을 줄줄히 보낼 수 있다.

참고로, 이 전달된 값을 받아서 사용하기 위해서는 

Todos 컴포넌트에서 this.props.name을 사용하면 해당 데이터를 가져올 수 있다.