import 할 때 중괄호 유무의 의미
import { Outlet } from "react-router-dom";
import styled from "styled-components";거창한 내용은 아니지만 이 두 경우의 차이가 무엇인지 궁금해졌다.
혹시라도 나와 비슷한 궁금증을 가진 사람이 있을까 해서 포스팅해본다.
별 거 아니고 컴포넌트를 export 할 때 default 설정 여부에 따라 달라지는 것을 확인할 수 있었다.
export default 하는 경우에는 중괄호를 "꼭" 생략하여 import 해야 한다.
그냥 export 만 하는 경우에는 중괄호를 "꼭" 포함하여 import 해야 한다.
구현 코드 확인
export function Outlet(props: OutletProps): React.ReactElement | null {
return useOutlet(props.context);
}react-router/lib/components.tsx 에 들어가서 확인해보니 Outlet 은 export 만 하는 것을 확인할 수 있었다.
const styled = baseStyled as typeof baseStyled & {
[E in SupportedHTMLElements]: StyledInstance<'web', E, React.JSX.IntrinsicElements[E]>;
};
// Shorthands for all valid HTML Elements
domElements.forEach(domElement => {
// @ts-expect-error some react typing bs
styled[domElement] = baseStyled<typeof domElement>(domElement);
});
export default styled;styled-components 의 styled 는 export default 되어 있는 것을 확인할 수 있었다.
export vs. export default
조금 더 자세히 알고 싶어서 정리해보았다.
우선, 모듈(module)은 크게 두 종류로 나뉜다고 할 수 있다.
export: 하나의 파일에 복수의 함수가 있는 라이브러리 형태의 모듈export default: 하나의 파일에 개체 하나만 선언되어 있는 모듈
export
하나의 파일로부터 export 된 여러 개의 함수를 import 하려면 어떻게 해야 할까?
// animal.js
export function dog() { ... }
export function cat() { ... }
export function shark() { ... }
...
import {dog, cat, shark, ...} from './animal.js';위의 코드 처럼 일일이 함수명을 적어주어 import 해주는 방식이 가장 정직한 방법이라 볼 수 있다.
하지만 개발자는 너무 정직한 방법에 항상 불편함을 느끼기 마련이다.
import * as animal from './animal.js';
const dog = animal.dog;
const cat = animal.cat;
...이렇게 as 문법을 사용하면 여러 함수를 한꺼번에 import 할 수 있어 코드의 길이가 무수히 길어지는 것을 방지할 수 있다.
import {dog as nana} from './animal.js';뿐만 아니라 원하는 이름으로 import(export 도 가능) 할 수 있다.
export default
하나의 파일에 개체 하나만 선언되어있는 모듈을 내보낼 때 많이 사용된다.
하나의 파일에 하나만 내보내다 보니 자연스레 파일의 개수가 많아질 수밖에 없지만 폴더 구조만 잘 잡으면 큰 문제가 되지 않을 것이다.
export default animal;
...
import animal from './animal.js';export default animal;
...
import dog from './animal.js';export default 의 경우는 굳이 as 문법을 사용하지 않아도 더 직관적인 이름으로 바로 import 가 가능하다.
