React 입문하는 중에 import 에 관해 질문합니다.
조회수 1817회
components 폴더 안에
import React from 'react';
import Navbar from 'bloomer';
import './Navbar.css';
const Navbar = () => {
return (
<main className="todo-list-template">
<Navbar style={{ border: 'solid 1px #00D1B2', margin: '0' }}>
<NavbarBrand>
<NavbarItem>
<img src={brand} style={{ marginRight: 5 }} /> Bloomer
</NavbarItem>
<NavbarItem isHidden='desktop'>
<Icon className='fa fa-github' />
</NavbarItem>
<NavbarItem isHidden='desktop'>
<Icon className='fa fa-twitter' style={{ color: '#55acee' }} />
</NavbarItem>
<NavbarBurger isActive={this.state.isActive} onClick={this.onClickNav} />
</NavbarBrand>
여기서 import 를 Navbar 만 하게 되면 에러가 납니다.
Failed to compile.
./src/components/Navbar.js
Line 9: 'NavbarBrand' is not defined react/jsx-no-undef
Line 10: 'NavbarItem' is not defined react/jsx-no-undef
Line 11: 'brand' is not defined no-undef
Line 13: 'NavbarItem' is not defined react/jsx-no-undef
Line 14: 'Icon' is not defined react/jsx-no-undef
...
import를 하나 하나 해주면 해결 될 듯이 보이지만 47개를 하나 하나 하는 건 비효율적이고 제대로 된 방법이 아닌 것 같아서 질문합니다.
import * from 'bloomer'; 같이 사용할 수 있는 방법은 없나요?
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
mdn의 import 문서(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import)를 살펴보시면 import는 이런식으로 사용할 수 있습니다.
import name from "module-name"; import * as name from "module-name"; import { member } from "module-name"; import { member as alias } from "module-name"; import { member1 , member2 } from "module-name"; import { member1 , member2 as alias2 , [...] } from "module-name"; import defaultMember, { member [ , [...] ] } from "module-name"; import defaultMember, * as alias from "module-name"; import defaultMember from "module-name"; import "module-name";작성자님이 질문한
import * from 'bloomer';같이 사용할 수 있는 방법은 없고, 대신import { member1 , member2 } from "module-name";이런 식으로 하는 방법을 추천드립니다.
-
(•́ ✖ •̀)
알 수 없는 사용자
-
댓글 입력