로봇아님33
120
2019-03-31 14:02:28
4
326

react와 html 관계에 대해서


react 입문자입니다! 초반 부분을 공부하다가 문득 궁금한 점이 있어 글 올립니다.


제이쿼리 같은 경우는 html문서를 따로 작성해서 같이 사용했는데 react에서는 오로지 자바스크립트 확장명 파일만을 이용해 페이지를 구성하나요?


react와 html문서가 같이 사용되는지 궁금합니다

0
0
  • 답변 4

  • moonti
    2k
    2019-03-31 15:42:01

    네 .

    리액트는 보통 jsx를 사용하고 jsx로 html을 렌더링하기 때문에 실제 html을 생성해낼 필요없죠.

    그냥 index.html에 

    Root로 아이디주고 그 하나 안 쪽으로 렌더링하죠

    0
  • freestyle
    3k
    2019-03-31 15:42:39

    제이쿼리는 보통 브라우저 스크립트용으로 사용되는 경우가 많았고 리액트로는 프론트 엔드 애플리케이션, SPA같은 형태로 개발되는 경우가 많기 때문에 HTML을 사용할 이유가 없습니다.

    예전(?)방식을 고집한다면 제이쿼리처럼 script src로 CDN을 인클루드해서 사용하면 되지만 의미가 없을 듯 하고 컴포넌트 클래스 형태로 구현하는 것이 일반적이라고 생각되네요.

    0
  • jtfdg
    310
    2019-03-31 21:05:20

    webpack 설정을 보시면 플러그인 부분에

    plugins: [
    // Generates an `index.html` file with the <script> injected.
    new HtmlWebpackPlugin({
    inject: true,
    template: paths.appHtml,
    }),

    부분이 있을 겁니다.

    저기 설정된 경로에 있는 html 파일 내부를 살펴보면 root 아이디를 갖고 있는 태그가 한가지 보이죠.

    거기가서 번들링 된 script들이 붙는거라고 이해하시면 됩니다. parcel이나 기타 번들러들도

    원리는 같아요.

    html 페이지 로드이후 번들링된 javascript 코드들이 해당 돔에 관련된 것들을 그려주는 것이죠.

    jsx가 babel로 컴파일된 코드를 살펴보시거나

    해당 페이지에 대한 요청을 postman등을 사용해서 해보세요.

    혹은 크롬 개발자 도구로 인터넷 속도를 느리게 설정하고 어떻게 로딩되는지 화면에 달라붙는 순서를

    보셔도 좋을 것 같습니다.

    서버사이드 렌더링이 왜 필요한지 뭐가 어떻게 다른지 이해하실 겁니다.

    0
  • 로봇아님33
    120
    2019-03-31 22:26:27

    모두들 감사합니다 한번 찾아봐야겟네여ㅛ!!

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.