[With TypeScript] 모듈 export, import

typescript 는 타입이 굉장히 중요하기 때문에, 기존 javascript 형식으로 export 함수를 생성하면 안된다. 

import 할 태그는 반드시 대문자로 시작해야 하므로 함수명 작성시 유의할것

 

• 함수 작성 예시

import React from 'react'

export const TestFC : React.FC = () => {
  return (
    <div>
      test
    </div>
  )
}

• 인자값이 없는 함수 import는 기존과 동일하다.
  
  
  
  
• 인자값이 있는 함수 작성
  • interface 로 props 에 해당하는 항목들을 생성해줘야 한다. 단순 string 하나라도 이렇게 작업해야 한다.
  • 함수에선 해당 interface 를 type로 하여 인자값을 받아야 한다.

interface TestVal
{
    n1 : string
}

export const TestFC : React.FC<TestVal> = (n1) => {
  return (
    <div>
      {n1.n1}
    </div>
  )
}

또는 

export function TestFC(n1 : TestVal)
{
    return (
        <div>
            {n1.n1}
        </div>

    );
}

• 호출 
• 기존 방법과 동일하다. 

import {TestFC} from './ts/test';

...


  <TestFC n1={"aa"}/>