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
————————————————————————-
import React from ‘react’

import {useCreateContext} from ‘react’

// 배열을 함수에서 리턴하여 export 하는 경우
// MyArray 사용할 때 마다 , 객체를 새로 생성하여 리턴함

export const MyArray = () => {
      const tmpArray =  [1,2,3,4,5];
      return tmpArray;
}

// 배열을 객체로 export 하는 경우
// ★ MyArray  사용시 객체가 없으면 1회 생성하며,
// ★ 이미 존재하면 기존 객체를 참조하여 사용함

export const MyArray = [1,2,3,4,5]

// Context 객체를 생성 후 함수로 리턴 한 경우
// MyArray 사용할 때 마다 , 객체를 새로 생성하여 리턴함
export const myCreateContext = () =>{ 
     conse appContext = useCreateContext({id:0 , name:’test’});
     return appContext;
}

// Context 객체를  직접 export 한 경우
// ★ MyArray  사용시 객체가 없으면 1회 생성하며,
// ★ 이미 존재하면 기존 객체를 참조하여 사용함

export const myCreateContext useCreateContext(null);

 

// 배열을 함수처리 후 리턴하여 export 한 값을 사용할경우
// 매번 새로운 객체가 생성됨
import {MyArray}  from ‘./myLibrary’
const getMyArray = MyArray();
console.log(getMyArray)

// 배열을 객체로 export 한 객체를 사용할 경우
// 변수 자체가 객체이므로 새로 생성하지 않음
(상위 컴포넌트에서 import 시 서브 컴포넌트에서 import 하더라도 새로 만들어지거나 초기화 되지않고 전역처리됨)
import {MyArray}  from ‘./myLibrary’
console.log(MyArray)

// Context 객체를 생성 후 함수로 리턴 한 경우
// 매번 새로운 객체가 생성됨

import {myCreateContext}  from ‘./myLibrary’

const getMyContext = myCreateContext();
console.log(getMyContext);

// Context 객체를  직접 export 한 경우
(상위 컴포넌트에서 만든 객체가  존재하면 그대로 사용)
존재하지않으면  최초 1회만 생성)

import {myCreateContext}  from ‘./myLibrary’
console.log(myCreateContext)

 

export 를 함수로 리턴할 경우, 상위(App) 컴포넌트에서 변경한 값은 서브 컴포넌트에 영향이 없다 

MyModule.js
——————————————–
import React from ‘react’

export const MyArray = () => {
       const tmpArray = [1,2,3,4,5];
       return tmpArray;
}

App.js
——————————————————————————-
import {MyArray}  from ‘./MyModule.js’
import {Header} from ‘./Header’


function App()

{
      const getMyArray = MyArray();  // 객체 생성

      console.log(getMyArray)  
   // myArray (5) [1, 2, 3, 4, 5]  출력

   // 배열 변경 (서브 컴포넌트에서  MyArray 참조시 변경되는가? 변경안됨)

       getMyArray[0] = 100;
       getMyArray[1] = 200;

  // myArray (5) [100, 200, 3, 4, 5]  출력
  
    return (
           <Header></Header>
           <Body></Body>
           <Footer></Footer>
    )
}

export default App;

Header.js
——————————————————————————-
import {MyArray}  from ‘./MyModule.js’

function Header()
{
    const getMyArray = MyArray();   // 객체로 새로 생성됨
    console.log(MyArray)
 
// myArray (5) [1, 2, 3, 4, 5]  출력 ( App의 변경 영향없음)

   return ‘this is Header’
}
export default Header;

Body.js
——————————————————————————-
import {MyArray}  from ‘./MyModule.js’

function Header()
{
    const getMyArray = MyArray();   // 객체 생성
    console.log(MyArray)
 
// myArray (5) [1, 2, 3, 4, 5]  출력 ( App의 변경 영향없음)

   return ‘this is Body’
}
export default Body;

Footer.js
——————————————————————————-
import {MyArray}  from ‘./MyModule.js’

function Header()
{
    const getMyArray = MyArray();   // 객체 생성
    console.log(MyArray)
 
// myArray (5) [1, 2, 3, 4, 5]  출력 ( App의 변경 영향없음)

   return ‘this is Footer’
}
export default Footer;

 

export 를 컴포넌트로 직접 내보내기한 경우 – 각각 다른모듈에서 사용하더라도 객체들의 참조되어 공유됨
createUseContext 경우도 전체 컴포넌트에서 사용/공유되어야 하기때문에  export [name] 으로 객체를 export 해야함
(return 으로  export 할경우 서브 컴포넌트에서 참조시 매번 새로운 createContenxt 로 새로 생성됨

MyModule.js
——————————————–
import React from ‘react’
export const MyArray = [1,2,3,4,5];

App.js
——————————————————————————-
import {MyArray}  from ‘./MyModule.js’
import {Header} from ‘./Header’


function App()

{
      console.log(MyArray)   // 바로사용

   // MyArray(5) [1, 2, 3, 4, 5]  출력

   // 배열 변경 (서브 컴포넌트에서  MyArray 참조시 영향 받는가? O)

       MyArray[0] = 100;
       MyArray[1] = 200;

  // myArray (5) [100, 200, 3, 4, 5]  출력
  
    return (
           <Header></Header>
           <Body></Body>
           <Footer></Footer>
    )
}

export default App;

Header.js
——————————————————————————-
import {MyArray}  from ‘./MyModule.js’

function Header()
{
    console.log(MyArray)
   
// myArray (5) [100, 200, 3, 4, 5]  (App 에서 변경된 값 출력 – 영향받음)    
    return ‘this is Header’
}
export default Header;

Body.js
——————————————————————————-
import {MyArray}  from ‘./MyModule.js’

function Header()
{
   console.log(MyArray)
   
// myArray (5) [100, 200, 3, 4, 5]  (App 에서 변경된 값 출력 – 영향받음)   
   return ‘this is Body’
}
export default Body;

Footer.js
——————————————————————————-
import {MyArray}  from ‘./MyModule.js’

function Header()
{
    console.log(MyArray)
 
// myArray (5) [100, 200, 3, 4, 5]  (App 에서 변경된 값 출력 – 영향받음) 
   return ‘this is Footer’
}
export default Footer;

 

 

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다