export default
export default
앞서 살펴 본 App.js 파일에서는 export 키워드와 default 키워드를 함께 사용하고 있습니다. 이 구문을 통해 ‘해당 파일에서는 하나의 컴포넌트 만을 내보낸다’는 의미를 명확히 나타낼 수 있습니다.
export defalut 구문
export default App;
그리고 export default 구문을 사용하여 내보낸 컴포넌트는 중괄호({})를 사용하지 않고 불러올 수 있으며, 이름 또한 원하는 이름으로 바꿔서 불러올 수 있습니다.
Laptop.js
export default function GetBrand() {
return <h1>내 노트북은 Samsung 노트북입니다.</h1>;
}
export function GetOS() {
return <h2>내 노트북의 OS는 Windows입니다.</h2>;
}
예제(App.js)
import Brand from "./Laptop";
export default function App() {
return <Brand />;
}
위의 예제처럼 한 파일 내에서 default export 구문과 named export 구문을 동시에 사용하는 경우는 실제로는 흔치 않습니다. 보통 하나의 파일에는 하나의 default export 구문 만을 사용하거나, default export 구문을 사용하지 않고 하나 또는 여러 개의 named export 구문을 사용하는 것이 보다 일반적입니다.
화살표 함수(arrow function)
default export 구문은 하나의 파일에 단 하나만 존재해야 하고, 이름 또한 원하는 이름으로 불러올 수 있기 때문에 default export 구문을 사용할 컴포넌트는 선언할 때 이름이 없어도 괜찮습니다.
Laptop.js
export default function () {
return <h1>내 노트북은 Samsung 노트북입니다.</h1>;
}
ES6 문법부터 추가된 화살표 함수(arrow function)는 function 키워드 대신 화살표 기호(⇒)를 사용함으로써 함수 컴포넌트를 손쉽게 선언할 수 있도록 해줍니다. 화살표 함수는 함수의 이름을 설정할 수 없기 때문에 기존 자바스크립트에서 사용된 익명 함수(anonymous function)처럼 함수를 선언하고 바로 변수나 상수에 대입하는 방식으로 사용합니다.
예제(Laptop.js)
const GetBrand = () => {
return <h1>내 노트북은 Samsung 노트북입니다.</h1>;
};
export default GetBrand;
화살표 함수는 주로 함수 자체를 파라미터로 전달할 때나 값을 연산하여 바로 반환할 때 사용하여 코드의 양을 줄여줄 뿐만 아니라 코드의 가독성도 높여줍니다.
화살표 함수는 function 키워드를 사용한 기존의 함수 선언 방식과 그 사용 용도가 약간 다르지만, React에서 함수 컴포넌트를 선언하는 경우에 두 방식 사이의 큰 차이는 없습니다. 본 수업에서는 앞으로 화살표 함수를 사용하여 함수 컴포넌트를 선언하도록 합니다.
