💎 props
🥊 전개구문
- 전개구문을 사용하면 배열이나 문자열과 같이 반복가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는
(배열 리터럴의 경우)로 확장하여,0개 이상의 키-값의 쌍으로 객체를 생성할수있다.
** 객체 형태도 가능하다 **
📣 App.js
- App.js : react로 만든 화면을 띄어주는 파일
import 변수명(아무거나) from './components/R01_props.js' == './components/R01_props.js' < 이경로에 있는걸 사용
import PropsEx from './components/R01_props.js';
function App() {
// 리액트의 컴포넌트는 딱 하나의 요소만을 반환할수 있다.
// -> 여러 요소를 반환하고 싶을 때는 부모 요소로 묶어준다!
return (
/* fragment(<></>) : 반환되는 요소를 감쌀 때 사용, 해석 x */
<>
{/* jsx 주석 */}
<h1>Hello React!!</h1>
<div>리액트 배운다~</div>
<PropsEx name={`홍길동`}/>
<PropsEx name={"김길동"}/>
<PropsEx name={`이길동`}/>
</>
);
}
export default App;
📣 R01_props.js
- props : 부모 컴포넌트가 자식 컴포넌트에게 데이터전달시 사용하는 객체 ↑ name={'...'} 3개가 props
- 리액트는 함수 먼저 읽고 그다음 위에서부터 코드를 수행한다
🔔 그렇긴 때문에 함수가 어디있던지 상관없이 선언만되면 선언위치에 상관없이 어느위치에 있던 함수를 쓸수있게된다.
🔔 리액트에서는 == 동등연산자는 안되고 === 동일 연산자를 사용해야한다
- const PropsEx = (props) => : 여기에서 props는 변수명이라 아무거나 사용해도 상관없고 들어있는값은 App.js에서 넘겨준값!!
- const ChildComponent =(props), const MenuPrint =(props) : const PropsEx 함세 넘겨준값이 props에 담겨있음!!
<Props Drilling>
import React from "react";
const ChildComponent = (props) =>{
return(
<>
<ul>
<li>이름 : {props.name}</li>
<li>나이 : {props.age}</li>
</ul>
</>
);
}
/* 한글도가능하지만 영어로하는게 통상적으로 맞는거니까 영어로 작성하자!!! ↓되는지 안되지는 판단해본것 */
const MenuPrint = (props) =>{
return(
<h4>김밥 : {props.김밥}, 떡볶이 : {props.떡볶이} </h4>
);
}
const PropsEx = (props) =>{
console.log(props);
console.log(props.name);
const menu = {'김밥':3000, '떡볶이':4000};
return(
<>
<h1>{props.name}</h1>
<ChildComponent name={props.name} age={props.name === '홍길동' ? 20 : 25}/>
<MenuPrint {...menu}/>
{/* <MenuPrint 김밥={3000},떡볶이={4000}/> */}
</>
);
}
export default PropsEx;
