- props : propertise의 준말, 컴포넌트에 어떤 값을 전달할때 사용하는 것
- 코드 중간에 중괄호가 있으면 자바스크립트 표현식이 들어간 것
- 컴포넌트에 어떤 값을 전달하려면 반드시 어떤 어트리뷰트에 값을 넣어주고, props를 이용해서그 어트리뷰트를 받을 수 있음
//app.js
import React from 'react';
import Hello from './Hello';
function App() {
return (
<Hello name="React" /> //hello컴포넌트에 name이라는 어트리뷰트를 넣고 React라는 값을 할당
);
}
export default App;
//Hello.js
import React from 'react';
function Hello(props) {
return <h1>Hello, {props.name}</h1> //hello라는 컴포넌트는 파라미터로 props를 받음,props에 속한 name이라는 변수를 참조해서 전체 jsx를 만들고 있음
} //어트리뷰트를 props는 받아서 props내부의 어트리뷰트 네임으로 값을 참조
export default Hello;
- props는 어차피 자바스크립트 오브젝트-> 비구조화 할당을 통해 안에 들어있는 값중에서 name만 꺼내도록 할 수 있음
//Hello.js
import React from 'react';
function Hello({name}) {
return <h1>Hello, {name}</h1>
}
export default Hello;
import React from 'react';
import Hello from './Hello';
function App() {
return (
<Hello /> //hello컴포넌트에 아무것도 할당되지 않음
);
}
export default App;
//Hello.js
import React from 'react';
function Hello({name}) {
return <h1>Hello, {name}</h1> //name이라는 값은 아무것도 할당되지 않음
}
Hello.defaultProps = { //defaultProps를 통해 name의 값을 기본적으로 할당함
name: "React!!"
}
export default Hello;
- export
- 해당 모듈(파일)에서 기본적으로 내보낼 값 하나를 정함
- 만일 다른 모듈에서 해당 모듈을 import한다면 export default 에 정의된 객체가 참조됨
- import 되는 객체의 이름 은 임의로 정할 수 있음
export default App; //이거 내보낸다
-->
import App from "App.js" //이거 임폴트 해서 받아온다, 이름 아무거나 상관없움
import MyApp from "App.js"
export {Var1, Var2}; //여러개도 가능!
-->
import {Var1} from "App.js" //여러개중에 받아오고 싶은것만 가져오기 가능
import {Var1, Var2} from "App.js"
