Props, Children
Props
React
에서는 Component를 다른 Component로 import해서 사용할 수 있다.
import하는 Component를 부모
라 칭하고, import되는 Component를 자식
이라고 칭한다.
2개의 Component사이에는 부모-자식 관계가 형성된다.
부모Component
에서 자식Component
로 여러가지 데이터들을 넘겨줄 수 있는데,
이를 props
라고 한다.
// 부모 Component
import React from "react";
import Child from "./Child"
class Parent extends React.Component {
render() {
return <div><Child /></div>
}
}
export default Parent;
// 자식 Component
import React from "react";
class Child extends React.Component {
render() {
return <div>Enjoywater</div>
}
}
export default Child;
위 코드처럼 부모-자식 관계
가 형성이 되면 Parent에서 Child로 데이터를 넘겨줄 조건이 완성된다.
데이터를 넘겨주기 위해서는 import한 Child Component에 인라인으로 작성해서 넘겨주어야 한다.
// 부모 Component
import React from "react";
import Child from "./Child"
class Parent extends React.Component {
render() {
return <div><Child name="Enjoywater"/></div>
}
}
export default Parent;
// 자식 Component
import React from "react";
class Child extends React.Component {
render() {
return <div>{this.props.name}</div>
}
}
export default Child;
Parent에서 작성한 name="Enjoywater"라는 코드가 Child에서는 this.props 객체
에 담기게 된다.
name은 key
, "Enjoywater"는 value
가 된다.
Children
위에서는, 부모 Component
에서 인라인으로 props를 넘겨주었다.
하지만 이 외에 props객체 속 children
으로 다양한 데이터를 넘겨줄 수 있다.
// 부모 Component
import React from "react";
import Child from "./Child"
class Parent extends React.Component {
render() {
return <Child>Enjoywater</Child>
}
}
export default Parent;
// 자식 Component
import React from "react";
class Child extends React.Component {
render() {
return <div>{this.props.children}</div>
}
}
export default Child;
인라인이 아닌 태그와 태그
사이에 컴포넌트를 포함한 다양한 값들을 넘겨줄 수 있다.
Author And Source
이 문제에 관하여(Props, Children), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@enjoywater/React-Props-Children저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)