2. Import와 Export

Import와 Export

1. import : export를 통해서 나와진 변수, 함수 클래스들을 사용할 수 있도록 가져온다.

2. export : 변수, 함수, 클래스 앞에 분어서 모듈의 기능을 외부에서 사용할 수 있도록 한다.

 

사용 예시

 

export를 이용한 css(emotion)

import styled from "@emotion/styled";

export const TopHead = styled.div`

display: flex;

justify-content: flex-end;

margin-right: 10%;

padding-top: 60px;

margin-bottom: 30px;

`;

export const BottomHead = styled.div`

display: flex;

justify-content: space-between;

margin-right: 60px;

align-items: center;

margin-bottom: 50px;

`;

export const My = styled.span`

font-size: 40px;

font-weight: 700;

margin-left: 50px;

`;

export const Profile = styled.div`

display: flex;

justify-content: space-between;

align-items: center;

`;

export const Name = styled.span`

font-size: 24px;

font-weight: 700;

margin-left: 20px;

margin-right: 10px;

`;

export const BigHead = styled.div`

border-bottom: solid 2px #cacaca;

`;

export const TopMenu = styled.div`

display: flex;

flex-direction: row;

justify-content: space-around;

margin-right: 80px;

padding-bottom: 45px;

`;

export const TopMenuEle = styled.div`

font-size: 24px;

font-weight: 700;

color: #cacaca;

`;

export const TopMenuSelect = styled.div`

font-size: 24px;

font-weight: 700;

color: #ff1b6d;

border-bottom: solid 2px #ff1b6d;

`;

export const BodyMenu = styled.div`

padding-top: 2%;

display: flex;

flex-direction: column;

margin-left: 25px;

`;

export const Question = styled.div`

font-size: 18px;

font-weight: 400;

color: #adadad;

margin-bottom: 15px;

`;

export const QuestionB = styled.div`

font-size: 24px;

font-weight: 400;

`;

export const QuestionDiv = styled.div`

display: flex;

justify-content: space-between;

padding-right: 30px;

align-item: center;

margin-bottom: 30px;

`;

export const BottomMenu = styled.div`

display: flex;

justify-content: space-around;

padding-top: 1.5%;

border-top: solid 1px #dcdcdc;

margin-top: 5%;

`;

export const BottomMenuEle = styled.div`

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

`;

export const BottomMenuImg = styled.img`

width: 40px;

height: 40px;

`;

export const BottomMenuString = styled.span`

font-size: 16px;

font-weight: 400;

color: #adadad;

`;

export const Vector = styled.img`

width: 32px;

height: 16px;

`;

export const All = styled.div`

background-color: #ffffff;

width: 640px;

height: 1095px;

`;

import해오는 코드

// import styled from "@emotion/styled";

import {

All,

TopHead,

BottomHead,

My,

Profile,

Name,

TopMenu,

TopMenuEle,

TopMenuSelect,

BodyMenu,

Question,

QuestionB,

QuestionDiv,

BigHead,

BottomMenu,

BottomMenuEle,

BottomMenuString,

BottomMenuImg,

Vector,

} from "../../styles/01-quiz";

export default function EmotionPage() {

return (

<All>

<BigHead>

<TopHead>

<img src="/search.png"></img>

</TopHead>

<BottomHead>

<My>마이</My>

<Profile>

<img src="/profile.png"></img> <Name>임정아</Name>{" "}

<img src="/right.png"></img>

</Profile>

</BottomHead>

<TopMenu>

<TopMenuEle>공지사항</TopMenuEle>

<TopMenuEle>이벤트</TopMenuEle>

<TopMenuSelect>FAQ</TopMenuSelect>

<TopMenuEle>Q&A</TopMenuEle>

</TopMenu>

</BigHead>

<BodyMenu>

<div>

<Question>Q.01</Question>

<QuestionDiv>

<QuestionB>리뷰 작성은 어떻게 하나요?</QuestionB>

<Vector src="/vector.png"></Vector>

</QuestionDiv>

</div>

<div>

<Question>Q.02</Question>

<QuestionDiv>

<QuestionB>리뷰 수정/삭제는 어떻게 하나요?</QuestionB>

<Vector src="/vector.png"></Vector>

</QuestionDiv>

</div>

<div>

<Question>Q.03</Question>

<QuestionDiv>

<QuestionB>아이디/비밀번호를 잊어버렸어요</QuestionB>

<Vector src="/vector.png"></Vector>

</QuestionDiv>

</div>

<div>

<Question>Q.04</Question>

<QuestionDiv>

<QuestionB>회원탈퇴를 하고싶어요.</QuestionB>

<Vector src="/vector.png"></Vector>

</QuestionDiv>

</div>

<div>

<Question>Q.05</Question>

<QuestionDiv>

<QuestionB>출발지 설정은 어떻게 하나요?</QuestionB>

<Vector src="/vector.png"></Vector>

</QuestionDiv>

</div>

<div>

<Question>Q.06</Question>

<QuestionDiv>

<QuestionB>비밀번호 변경하고 싶어요</QuestionB>

<Vector src="/vector.png"></Vector>

</QuestionDiv>

</div>

</BodyMenu>

<BottomMenu>

<BottomMenuEle>

<BottomMenuImg src="/home.png"></BottomMenuImg>

<BottomMenuString>홈</BottomMenuString>

</BottomMenuEle>

<BottomMenuEle>

<BottomMenuImg src="/navi.png"></BottomMenuImg>

<BottomMenuString>잇츠로드</BottomMenuString>

</BottomMenuEle>

<BottomMenuEle>

<BottomMenuImg src="/heart.png"></BottomMenuImg>

<BottomMenuString>마이찜</BottomMenuString>

</BottomMenuEle>

<BottomMenuEle>

<BottomMenuImg src="/my.png"></BottomMenuImg>

<BottomMenuString>마이</BottomMenuString>

</BottomMenuEle>

</BottomMenu>

</All>

);

}

결과 화면

1일차 quiz