[React] 다른 자바스크립트 파일의 컴포넌트 가져오기

목표

App.js에서 다른 자바스크립트 파일에 있는 컴포넌트를 가져온다.

 

Detail.js 컴포넌트 → App.js 이동 과정

1. Detail.js 컴포넌트 export

function DetailCard(){
    return(
        <>
            <div>상세내용 출력</div> 
        </>
    )
}

export default DetailCard;

2. App.js에서 Detail.js import

import DetailCard from './Detail'

뒤의 경로에 특별한 확장자를 입력하지 않으면 '.js'로 자동인식한다.

 

한 파일에서 여러 컴포넌트를 사용하고 싶은 경우

 1) Detail.js

function DetailCard(){
    return(
        <>
            <div>상세내용 출력</div> 
        </>
    )
}

fuction BriefCard(){
    return(
        <>
            <div>간략내용 출력</div> 
        </>
    )
}

export default DetailCard;
export BriefCard;

 2) App.js

import DetailCard, {BriefCard} from './Detail'

Detail.js 파일에 있는 DetailCard, BriefCard 컴포넌트를 모두 받아온 모습이다.

Detail.js 파일에서 default 키워드를 사용하지 않았기에 중괄호로 묶어줘야한다.

하나의 파일에 default 키워드는 한 번만 쓸 수 있으니 주의한다.

 

 

출처 : 코딩애플_React 기초부터 쇼핑몰 프로젝트까지!

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌