React(웹 셋째주)

Props

• Props(Properties) : 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터
• 부모 컴포넌트로부터 받는 데이터이므로 자식 컴포넌트에서는 변경할 수 없음 (= 한 컴포넌트의 속성(Properties)과 같음)

html에서:

<div id="name" class="label" onclick="alert('Hello World!');">
  Hello world!
</div>

React에서:

const Text = (props) => {
  return <div>{props.text}</div>
}

const App = () => {
  return <Text text="Hello world!"/> 
}

{/* <div>"Hello world!"</div> 간 화면에 나옴!*/}

부모 컴포넌트(App)에서 자식 컴포넌트(Text)에 속성(Props)을 이용하여Hello world!라는 문자열 데이터를 전달

Props 구조분해할당

• 구조분해할당 : 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식
• prop에서 쓴다면?

App.js

const Text = (text) => {
  return <div>{text}</div>
}

const App = () => {
  return <Text text="Hello world!"/>
}

{/* <div>"Hello world!"</div> 가 화면에 나옴!*/}