일단, 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을 사용하면 해당 데이터를 가져올 수 있다.
'개발 > React' 카테고리의 다른 글
| [React] 아무 이미지나 넣고 테스트할때 필용한 npm 패키지... (0) | 2020.07.17 |
|---|---|
| [React] 리액트 JSX에서 HTML 자동완성(emmet) 적용하기 (1) | 2019.09.21 |
| [React] prop-types 적용 시 에러 발생 - TypeError: Cannot call a class as a function (1) | 2019.02.17 |
| [React] 리액트 배열을 map할 때 key 생략 시 에러 발생! (0) | 2019.02.16 |
| [React] You should not use <Link> outside a <Router> 에러 (0) | 2019.01.31 |
