React

Events in React

mellomello.made 2022. 6. 15. 15:05

 

cc: nomad coders  ReactJS로 영화 웹 서비스 만들기 #2.3 Events in React

 

 

vanilla.html에 적은 버튼 이벤트리스너를 index.html에서 React로 4줄의 코드를 한번에 대체했다.
 

  • React JS import
    • React JS는 반드시 필요하다.
    • React JS가 element를 생성하고 event listener를 더하는 것을 도와준다.
    • React JS가 Interactive power를 가지고 있기 때문이다.
    • 어플리케이션이 아주 인터랙티브하도록 만들어주는 library 엔진과 같다.
  •  ReactDom import 
    • React element들을 가져다가 HTML로 바꾸기 위해 ReactDom import
    • library 또는 package. 모든 react element들을 HTML body에 둘 수 있도록 해줌.
  • ReactDom.render
    •  render의 의미는 react element를 가지고 HTML로 만들어 배치한다는 것. 즉, 사용자에게 보여준다는 의미
    • ReactDom은 React element들을 root div 안에서 보여주라는 뜻이다.
  • 10번 줄 const h3의 createElement(“h3”)는 반드시 생성하고자 하는 HTML 태그와 똑같아야한다.
  • <body>태그 안에 비어있는 div는 ReactDom이 React element들을 가져다 놓을 곳이다.
    • 그래서 9줄에서 root div를 가져온 후에, 36번 줄에서 ReactDom.render를 했다.
    • 35번줄 container element는 div이다.
    • div의 content는 h3와 btn이다.
  • 바닐라JS는 HTML -> JS 순서
    리액트는 JS -> HTML 순서
    • JS가 element를 생성하고 React JS가 그것을 HTML로 번역하는 것
      React JS는 업데이트 해야 하는 HTML을 업데이트 할 수 있음
MacOS에서(더 다양한 환경에서도 재현 가능성 있음)하게되면,CORB 위반으로 인해 unpkg를 못불러옴, 
따라서 script를 불러올 때,중간에 crossorigin 을 넣으면 정상작동합니다.

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

다음강의에서는 create element를 쓰지 않는다고 한다. 하지만 이게 React js의 기초이고 핵심이자 어려운 방법이다. 

 

 

#react #리액트

 

 

오류 나거나 콘솔에 안 뜨는 경우
Uncaught ReferenceError: ReactDom is not defined

ReactDOM(DOM 대문자)로 했는지, event listener가 소문자, 대문자로 잘 적혀있는지 확인한다.

 

저작자표시 비영리 변경금지 (새창열림)