[React] import할 때 {}(중괄호)의 의미

react-native를 하며 라이브러리에서 특정 메소드 또는 함수를 import 할 때 {}(중괄호) 안에 적어줄 때도 있고 그냥 메소드명만 표기할 때가 있는데, 예를 들어 아래와 같은 경우가 있다.

 

import React, { useState, useEffect } from 'react';

 

React는 중괄호 없이 적었고, 상태 관리를 위한 Hook인 useState와 컴포넌트 랜더링 시 원하는 작업을 실행시키도록 도와주는 Hook인 useEffect는 중괄호 안에 메소드를 적었다. 이는 'react'라는 패키지 내부에서 어떻게 해당 메소드를 export 하는지에 따라 import시 표기하는 방법이 달라진다.

 

만약 아래와 같은 contextAPI가 있다고 가정한다.

 

import React, { createContext, useState } from "react";

const UrlContext = createContext({
    data: {url: ""},
    dispatch: () => {},
});

const UrlProvider = ({ children }) => {
    const [url, setUrl] = useState("https://github.com/sehoon787?tab=repositories");

    const value = {
        url: {url}, 
        dispatch: setUrl
    };
    
    return (
        <UrlContext.Provider value={value}>
            {children}
        </UrlContext.Provider>
    );
};

const UrlConsumer = UrlContext.Consumer;

export {UrlProvider, UrlConsumer};
export default UrlContext;

 

이렇게 export default로 지정한 UrlContext가 있고 그냥 export한 UrlProvider와 UrlConsumer가 있다. 이 메소드들은 아래와 같이 import 할 때 구분할 수 있다.

 

import UrlContext, {UrlProvider, UrlConsumer} from './contexts';