React JS - react props

 

 

React JS props

---

리액트는 컴포넌트 끼리 값을 보낼 때 props를 사용한다.

 

컴포넌트를 단순히 설명하면 함수 하나라고 할 수 있다.

 

//Test component
function Test(props){
    return(
      <h1> {props.title} </h1>
    )
}

//App component
function App() {
  return (
    <Test title="props test title" />
  )
}

export default App;

 

App 컴포넌트에서 Test 라는 컴포넌트를 가져다가 쓸 경우 html의 속성처럼 정의 할 수 있는데 이것을 props 라고 한다.

 

App 에서 <Test /> 를 가져다 쓰는 부분은 onClilck 같은 html 속성은 사용 할 수 없다. 

 

오직 사용자 정의 값이 들어간다. 

 

나중에 컴포넌트를 파일별로 나누어도 App()에 나눈 컴포넌트만 import 할 뿐 이고 값을 전달하는 방법은 같다.

 

( 파일별로 나눈 것이 부모컴포넌트 에서 자식 컴포넌트로 값을 보낸다고 표현 한다. )