React 에서 2가지 이상 import 하기

한 개의 파일에서 여러가지 함수들을 정의 했을 때 모든 함수를 불러오는 방법에 대해 알아보겠습니다.

 

1개만 import 하는 방식

먼저 1개만 import 하는 방식에 대해 먼저 다뤄보겠습니다.

App.js

import Test from './pages/Test';

function App() {
  return (
	<Test />
  );
}

export default App;

1개만 가져올때는 이렇게 간단하게 할 수 있습니다.

하지만 2개 이상 가져올때 여러 줄로 표현 해도 되지만 이러면 불편 하기 때문에 한 줄로 간단 명료하게 나타낼 수 있습니다.

 

2개 이상 import 하는 방식

Test.js

import React from "react";
import {hamburger , pizza} from "../functions/a";




function Test() {
    return(
        <div>
             <button onClick={()=>hamburger()} /> 
             <button onClick={()=>pizza()} /> 
        </div>
    )
}

export default Test

이런식으로 중괄호( { } ) 에 묶어서 한번에 전달 해주면 됩니다.

그리고 a.js에서도

import item from '../json/test.json'


const hamburger = () =>{
    console.log(item)
}
const pizza = () =>{
    console.log(item)
    console.log('asd')
}


export {hamburger , pizza }

export를 해줄때 이런식으로 해주면 됩니다.

 

감사합니다.