React : 외부 모듈에서 export [name] 에 함수로 리턴과 , export [name] 에 직접 할당시
[ export 할 name 에 직접 할당할 경우 ] export const MyObject = ‘객체 , 값’ MyObject 자체가 전역 함수/변수처럼 사용되어, App.js 에서 import 해서 참조 하게 되면, App.js 에서 사용되는 모든 서브 컴포넌트에서 참조를 위해 import 하더라도 새로운 값이 아닌 App.js 에서 사용된(변경/수정) 값이 그대로 사용되어진다. (App.js 에서 import 하여 MyObject 값을 변경하면 , 서브 컴포넌트 Header.js 에서 import 해서 사용하더라도 App.js 에서 변경된 MyObject 값들이 그대로 Header.js 에서 영향을 받아 전역변수(객체) 처럼 이용 할 수 있다.) [ export 할 name 에 함수처리 후 리턴 할 경우 ] export const MyObject = () { return ‘객체 , 값’ } // 새로운 객체가 생성되어, 모든 서브 컴포넌트에서는 각각 다른 객체로 사용되게 된다 | |
myLibrary.js // 배열을 함수에서 리턴하여 export 하는 경우 // 배열을 객체로 export 하는 경우 // Context 객체를 생성 후 함수로 리턴 한 경우 // Context 객체를 직접 export 한 경우
|
// 배열을 함수처리 후 리턴하여 export 한 값을 사용할경우 // 배열을 객체로 export 한 객체를 사용할 경우 // Context 객체를 생성 후 함수로 리턴 한 경우 // Context 객체를 직접 export 한 경우 |
export 를 함수로 리턴할 경우, 상위(App) 컴포넌트에서 변경한 값은 서브 컴포넌트에 영향이 없다 | |
MyModule.js export const MyArray = () => { | App.js // myArray (5) [100, 200, 3, 4, 5] 출력 export default App; Header.js function Header() Body.js function Header() Footer.js function Header() |
export 를 컴포넌트로 직접 내보내기한 경우 – 각각 다른모듈에서 사용하더라도 객체들의 참조되어 공유됨 createUseContext 경우도 전체 컴포넌트에서 사용/공유되어야 하기때문에 export [name] 으로 객체를 export 해야함 (return 으로 export 할경우 서브 컴포넌트에서 참조시 매번 새로운 createContenxt 로 새로 생성됨 | |
MyModule.js | App.js // myArray (5) [100, 200, 3, 4, 5] 출력 export default App; Header.js function Header() Body.js function Header() Footer.js function Header() |