react 외부 함수형 컴포넌트 가져오는 방법

이번 시간은 react 외부 함수형 컴포넌트 가져오는 방법에 대해 알려드리고자 합니다.

컴포넌트 만들기

모듈 내보내기(export) 및 가져오기 (import)를 통해 외부 함수형 컴포넌트를 가져올 수 있습니다. 일단 사이트에서 header 부분을 담당할 header 컴포넌트를 만들어보겠습니다.

 

header.js

import React from "react";
 
const header = () =>{
    return(
        <div className="wrap">
            <div className="wrap--flex">
                <div className="logo">
                    <a href="">
                        <h1>CYH Portfolio</h1>
                    </a>
                </div>
                <nav>
                    <ul>
                        <li>
                            <a href="/">HOME</a>
                        </li>
                        <li>
                            <a href="/about">ABOUT</a>
                        </li>
                        <li>
                            <a href="/portfolio">PORTFOLIO</a>
                        </li>
                        <li>
                            <a rel="noopener" target="_blank" href="/https://itemscode.com/blog/">BLOG</a>
                        </li>
                    </ul>
                </nav>
                <footer>
                    <ul>
                        <li>
                            <span>사는곳: 서울특별시 영등포구</span>
                        </li>
                        <li>
                            <a rel="noopener" target="_blank" href="https://mail.google.com/mail/?view=cm&fs=1&to=choyoungho95@gmail.com">email: choyoungho95@gmail.com</a>
                        </li>
                        <li>
                            <span>&copy; 2021 CYH Portfolio.</span>
                        </li>
                    </ul>
                </footer>
            </div>
        </div>
    )
}
 
export default header

header 컴포넌트에서 export default [컴포넌트 이름]을 넣어 내보낼 수 있습니다.

 

main.js

import React from "react";
 
import Header from "../../items/header";
 
const LandingPage = () =>{
    return(
        <>
            <Header />
            <h2>LandingPage</h2>
        </>
    )
}
 
export default LandingPage

여기서 중요한 것은 첫 글자는 대문자로 가져오고 사용해야 합니다. import Header from [경로]