[Web]React Component, ReactStrap(react용 bootstrap),export {괄호} 차이, curly braces

보통 웹페이지의 스타일을 만들때 bootstrap을 많이 가져와서 썼죠??

​

React에서는 부트스트랩을 쓸 수 없습니다.

Why? HTML코드에 클래스를 입혀서 만들었는데, 리액트는 html 기반이 아닌 컴포넌트 기반이기 때문이죠

​

따라서 리액트의 규칙에 맞춰서 부트스트랩을 re-implementation 해야합니다.

하지만!! 이걸 이미 해줬답니다. reactstrap을 설치하시면 됩니다!!!

​

포스팅 하면서 찾아보니 react-bootstrap 도 있군요.. 아 이게 더 진짜같은데;; 쩝 .. 여기서 리액트 스트랩 쓰니까 저도 씁니다..

 

npm install bootstrap
npm install reactstrap
npm install react-popper

위의 3가지를 다운로드 받아주세요!!

​

의문점 :

1. reactstrap 쓰면 된다며, 왜 bootstrap은 다운받냐 ?

-> 패키지의 다운로드 방법이 이렇게 나와있습니다. 저에게 뭐라고 하시면.. 당신의 이름이 김 아무개인 이유를 설명할 수 있으면 답글 바랍니다!!(만든사람이 그렇게 지었음)

제 생각이지만, 부트스트랩 html을 가져와서 reactstrap에서 재정의를 해서 그렇지 않을까 싶습니다.

​

2. react-popper는 뭐냐 ?

react-popper is the official React wrapper to let you use Popper in your React projects.

It exposes an API very similar to the one of the Vanilla JavaScript library, but it provides some useful addition to better integrate with React.

usePopper 같은 자기가 만든 패키지에서 훅들을 만든것 같은데..

저도 아직 잘 모르겠습니다. 이건 리액트 공식이 아닙니다. (아직 안써봄) 받아들이세요.

 

import 'bootstrap/dist/css/bootstrap.min.css';

App.js의 헤더에 이걸 추가해주세요

저 파일이 어딨는지 궁금하면 node_modules -> bootstrap 부분 한번 보세용^^

​

*node_module에 파일이 너무 많다. 이거 무거워지는거 아니냐?

-> 교수님께서도 그런 걱정 하지 말라고 하셨습니다. 아무리 많아도 10MB 아래 이므로, 괜찮다고 하셨습니다.

 

import { Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Navbar, NavbarBrand } from "reactstrap";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div className="App">
        <Navbar dark color="primary">
          <div className="container">
            <NavbarBrand href="https://www.naver.com">My Naver</NavbarBrand>
          </div>
        </Navbar>
      </div>
    );
  }
}

reactstrap에서 지원하는 (bootstrap에도 있겠지만) Navbar과, NavBrand를 이용해봅시다!!

* react 기본 컴포넌트가 아닌것들은 모두 앞이 대문자입니다. <Navbar> (누가 만든거) , <div> (기본 제공)

​

이렇게 해보시면

이런 화면이 나오고 My naver를 누르시면 Naver로 이동되는것을 확인하실 수 있답니다^^

자, 이렇게 리액트에서 부트스트랩을 써 봤습니다!!

​

이제 위에서 말했던 나만의 컴포넌트를 만들어봅시다!!

import { Component } from "react";

class Mycomponent extends Component {
  render() {
    return (
      <div>
        <p>this is my first Component!!</p>
      </div>
    );
  }
}

export default Mycomponent;

사용자 정의 컴포넌트는 첫 글자가 대문자 입니다!!!

다들 초록불에 횡단보도 건너는데, 혼자만 빨간불이 건너는 신호라고 하지 맙시다!!!!

​

자기가 컴포넌트를 만들어줬으면, 반드시 수출 해줘야합니다!! export 보이시죠??

​

이거 만들다 알았는데, 본능적으로 import 할떄 {} 안에 함수나 클래스명을 넣었는데, 갑자기 실행이 안됐습니다.

이유를 알았습니다...

​

1. import { Mycomponent} from "~~"

2. import Mycomponent from "~~"

두개의 차이를 아시겠나요??

​

2번같은 경우에는 export 시에 default로 할 경우에 가능합니다.

export의 default는 함수나,클래스 같은것을 할 수 있고, 한 파일 내에 한개만 가능합니다.

따라서 export default로 내보낸 부분을 {}로 감싸면 컴파일 에러가 납니다.!!

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export

export - JavaScript | MDN

위의 사진처럼, default로 export 한 경우에는 {}가 없어야 합니다.

아래와 같이 default가 없으면 {}가 필요합니다.

위와같이 {}가 필요합니다.

​

default를 자주 쓰는것 같진 않습니다.

일반적으로 import를 할때 대부분 {}안에 넣어서 가져왔는데, 다른점을 모르고 있었습니다.

​

지금 와서 이전에 만들었던것들을 보니 다들 default가 없는 export를 하고 있습니다.

대부분 패키지들안의 모듈은 그냥 export로 되어있답니다.

​

이 차이를 이번에 처음 알게됐네요.! 나이수!!!

​

​

자!!이제

내가 만든 콤포난트를 추가해보겠습니다!!

​

import { React, Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Navbar, NavbarBrand } from "reactstrap";
import { Mycomponent } from "./components/MyComponent";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div className="App">
        <Navbar dark color="primary">
          <div className="container">
            <NavbarBrand href="https://www.naver.com">My Naver</NavbarBrand>
          </div>
        </Navbar>
        <Mycomponent /> 
      </div>
    );
  }
}

저기에 <Mycomponent/> 보이시죠? 이제 저 부분에, 제가 외부에 정의한 부분이 들어간답니다!

보이시나요?? 제가 만든 부분이 들어갔습니다!!

이렇게 스스로 콤포넌트를 만들어서 추가할 수 있습니다.

나중에 유지보수 할때도 좋겠죠?

​

단점은 뭘까요.. 나중에 대규모 프로그램이 되면, 파일이 굉장히 많아지겠죠? 엄청난 숫자의 component가 있을것이고 파일도 많겠죠..

그땐 splitting을 해야한다고 하더라구요. 저도 아직은 뭔지 잘 모른답니다^^

​

우리 이웃님들도 다같이 실습해보세요^^

​

다음 시간에는

react component lifecycle과 Component 2탄을 해보겠습니다.

​

다들 열정!!열정!! 열정!!!!