props와 import/export

Component에 data binding을 위해서는 props 문법을 사용해야 한다.

또한 외부 jsx 파일의 함수, 변수 등을 불러올 때는 import
/export를 사용해야 한다.

props

function Comp(props) {
    let [data, editData] = useState("데이타");        
    return (
        <div>
            <Comp data={data} data2="데이타2"></Comp>
        </div>
    )
} 

function Comp(props) {
    return (
        <div>
            { props.data + props.data2 }
        </div>
    )
}

띄어쓰기로 구분하여 여러개의 data를 보내줄 수 있다

export/import

// dataExport.js
var data = ["aa", "bb", "cc"];
export default data;

// dataImport.js
import dataImport from "./dataExport.js

또는

// dataExport.js
var data = ["aa", "bb", "cc"];
var data2 = "data2;
export { data, data2 };

// dataImport.js
import { data, data2 } from "./dataExport.js

export default를 사용한다면 하나의 객체만 내보낼 수 있지만, export {} 를 사용한다면 여러개의 객체를 내보낼 수 있다.

또한 export default를 사용하면 import시 변수명을 자유롭게 작성할 수 있지만, export {}를 사용한다면 변수명은 export {} 안의 변수명 그대로 사용해야 한다.