자바스크립트 함수 호출 (import, export) , 함수 리턴(JSX)

1. 다른 자바스크립트 함수 호출

일반  HTML , Javascript 에서는 새로운 JavaScript를 참조하여 쓸 때 <script src> 를 통해 불러온 후 함수명으로 호출하면 되지만, 

리엑트에선 WebPackage로 묶이기 때문에 저렇게 사용하지 않는다. 

 

따라서 사용처 에서는

import {함수명칭} from '위치/파일명';  //파일 확장자는 적지 않고 파일 명만 적는다

처럼 import 를 하여 사용을 한다. 

 

위처럼 다른곳에서 해당 JavaScript 함수를 import 할 수 있게 하려면, 해당 JavaScript 함수 작성시 export를 붙여야 한다.

import 에서 사용하는 명칭과 일치해야 한다.

export function 함수명()
{
	return(<div>...);

}

 

따라서 React 에서 생성하는 JavaScript 함수 에는 export 를 기본적으로 해주어야 한다.

 

함수명 앞에 일일히 붙이는것이 아닌 default 를 이용 할 수 도 있는데, 함수 앞에 붙이는것이 좋아보인다
(소스코드 하나에 함수 여러개 존재)

 

2. 다른 자바스크립트 함수 호출

이렇게 export를 하게되면 이는 사용자 정의 태그가 되어, 사용처에서는 일반 html 태그를 사용하듯이 사용한다. 

import {test} from '......';
....

<test/>

....

* 한가지, 다른 자바스크립트에서 불러온 함수 태그 사용시, 해당 태그 안에 다른 자식요소를 넣을 수 없다. 
   즉, <test> <p>aaaa</p> </test> 처럼 사용 할 수 없다. 오류는 나지 않지만 렌더링 되지 않는다.

 

3. 함수 리턴

함수 호출시 보통은 처리 결과값을 화면에 표현해야 하므로, html 태그를 포함하여 리턴하는 방식으로 주로 사용된다. 

JSX 형식을 리턴하는것으로 html과 비슷하나 다르다. 

function 함수명()
{

	return (<div> .....);

}

 

3. 1. JSX

• 리턴은 하나의 태그만 가능하다.
  • 여러개의 태그를 리턴한다면, <> </> 태그 안에 각 태그들을 삽입하여 리턴하거나, <div> 같은걸로 한번 묶어서 리턴해야 한다. 
  • 변수를 포함한다면 {변수명} 을 사용한다 ('${}' 가 아니다.)
    • 변수명은 || 를 사용하여 false, undefined 등을 체크하여 알맞은 값을 리턴하도록 한다
      • 예) 변수명 || "값이 없습니다"   => 변수명 || 의 뜻은 변수명이 알맞는 형태인지 검증
  • class 에 값을 넣으려면, className 을 사용 해야 한다
    • class 는 예약어로 사용 X
  • - 은 사용불가하고, CamelCase로 변경해야 한다.
    • 예 : background-color => backgroundColor
  • style 을 사용 하려면, 변수로 생성 후 배정하거나, 위의 CamelCase 표기법을 참조하여 작성한다

const 변수명 = {
	backgroundColor : "yellow",
    .....

}


.....

return ( .... style = {변수명} ... style = {{backgroundColor : "black", ...}} );