export vs export default

export

import {gql} from "@apollo/client"

export const 나의그래프큐엘셋팅 = gql`
    mutation createGraphql($writer: String!, $title: String!, $contents: String!){
        createGraphql(writer: $writer, title: $title, contents: $contents){
            message
            writer
            title
            contents
            id
        }
    }
`;

해당 코드를 받아오는 부분에서는

import {나의그래프큐엘셋팅} from "./BoardWrite.queries"

import를 해오는데 중괄호{}는 해당 파일에서 어느코드를 불러올지 선택할 수 있음.

export default는 하나의 js 파일 내에서 한번밖에 못씀.

import { RedInput, BlueButton } from "./BoardWrite.styles"

export default function BoardWriteUI (props) {
    return(
        <div>
        작성자: <RedInput type="text" onChange={props.bbb}/>
        제목: <RedInput type="text"  onChange={props.ccc}/>
        내용: <RedInput type="text"  onChange={props.ddd}/>
        <BlueButton onClick={props.aaa}>GRAPHQL-API 요청하기</BlueButton>
        </div>
    )
}

해당 코드는 받아올 때

import BoardWriteUI from "./BoardWrite.presenter";

중괄호 없이 통채로 받아옴.
또한 export default는 어차피 한개이기에 이름을 반드시 맞춰서 가져올 필요도 없음

import aaaaaaaa from "./BoardWrite.presenter";

이런식으로 이름을 마음대로 지정할 수 있음.

만약 하나의 파일에 export 와 export default가 모두 있으면
각각 받아와서 사용하면 됨.

export default function BoardWriteUI (props) {
    return(
        <div>
        작성자: <RedInput type="text" onChange={props.bbb}/>
        제목: <RedInput type="text"  onChange={props.ccc}/>
        내용: <RedInput type="text"  onChange={props.ddd}/>
        <BlueButton onClick={props.aaa}>GRAPHQL-API 요청하기</BlueButton>
        </div>
    )
}
export const aaaa = 3

이렇게 있다면

import BoardWriteUI,{aaaa} from "./BoardWrite.presenter";

이렇게 각각 가져오면됨.

스타일같은 export가 한가득 있는경우

import * as AAA from '경로'

하면 됨

import styled from '@emotion/styled'

export const RedInput = styled.input`
    border-color: red;
`

export const BlueButton = styled.button`
    background-color: blue;
    color: white;
`

을 받아오면

import * as style from "./BoardWrite.styles"

style.RedInput
style.BlueButton

이런식으로 사용이 가능함.