공군소령김도지
624
2021-07-23 11:38:59
3
145

리액트 질문 드립니다.


저는 리액트를 사용할때

npx create-react-app my-app 해서 리액트 앱을 만든뒤 사용합니다. 


근데 인터넷 강의에서 

html 파일에 다가 


<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

이런식으로 스크립트로 해가지고 

babel 써서 jsx를 js로 변환 해서 하더군요. 


1.

이미 react app에 이런기능들이 다 포함되어 있는거죠?

그런데 왜 react app으로 쓸땐 babel로 변환된 jsx를 찾아 볼수 없는거죠?


2.

 실제 회사 에서 리액트 쓸땐 

npx create-react-app my-app 해서 쓰나요?


3.

  var pickBtn = React.createElement(
    "div",
    { key: "pickBtn"id: "buttonPick" },
    React.createElement(
      "button",
      { onClick: pickBtnShow },
      "What should I do ?"
    ),
    React.createElement(
      "p",
      null,
      pickBtnShowValue
    )
  );

  //Component tree
  var component = [titlelistTamplateuserInputpickBtn];
  ReactDOM.render(componentroot);


위는 babel을 통해 전환된 js파일 인데요.

리액트 라는건 결국 상단의 React,ReactDOM을 지원하는 라이브러리 인건가요?

0
  • 답변 3

  • 메이플비
    452
    2021-07-23 12:02:49 작성 2021-07-23 12:03:56 수정됨

    1. 만약 nom start나 yard start로 리액트 앱을 개발하시는거라면, 변환된걸 볼 일이 없습니다. webpack으로 관리가 되는걸테니까요. 보고 싶으시다면 build를 해보시면 될겁니다.

    2. 저런식으로 url에 포함시켜서 쓰는 회사도 있겠지만, 대부분 노드 패키지로 설치해서 쓰겠지요. (create-react-app을 써서 만들던 아니면 npm install을 써서 만들던)...

    그리고 프로젝트의 규모가 작으면 그냥 써도 무방하나, 규모가 커지고 세부적으로 직접 세팅해야할 일이 많은 경우는 이젝트 해서 씁니다. (되돌릴수가 없습니다.)

    3. 리액트를 완벽한 의미의 프레임워크로 보지 않는 사람들도 있지만, 리액트 주변으로 쌓아올려진 생태계와 함께 사용하는 경우가 많기 때문에 사실상 프레임워크로 활용되고 있다고 봐야겠죠

  • 공군소령김도지
    624
    2021-07-24 02:29:00

    이젝트가 뭔가요?

  • 메이플비
    452
    2021-07-24 02:41:30

    create-react-app으로 리액트 앱을 만들면 세부적인 설정들이 숨겨져있습니다. 일반적으로 앱의 규모가 크지 않으면 그런 세부사항을 건드릴 일이 없기 때문에 그냥 쓰면 되지만, 앱의 규모가 커지고 또 여러가지 설정을 건드려야 할 일이 많아지면 결국 이젝트를 해서 (이젝트를 하게되면 설정들이 노출되어서) 여러가지 사용자 설정을 별도로 줄 수가 있습니다.

    요즘은 이젝트를 하지 않고도 설정을 건드리는 방법들이 있는것 같은데 전 해보진 않아서 잘 모르겠네요.

    이젝트는 한 번 하면 되돌릴수가 없기 때문에 잘 모르는 경우는 이젝트를 하지 않고 사용하는게 좋겠지요.

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