JS (label은 input 옆에 써줄 수 있는데 label을 클릭하면 input이 선택되게끔 기능한다)
JSX에서는 그런데 틀린 문법이다. (이렇게 for 로 label과 input를 연결해 주는 것이 말이다.)
for는 class 처럼 JavaScript 에서 reserved 된 용어이다. JavaScript에서 선점된 문법 용어를 사용 못한다.
JSX는 HTML과 비슷해 보이는 점들이 많지만 반드시 기억해야할 다른 점들이 있다.
태그 속성으로 class를 쓰려면 className 이라고 써야하고
for는 htmlFor이라고 써야한다.
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
react, reactdom을 import하는 script tag에서
production - > development 로 변경하는데
production은 배포 모드, development는 개발 모드를 의미합니다.
개발모드는 니코쌤이 보여준 것 처럼 버그로 이어질 수 있는 요소들을 미리 경고하는 검증 코드가 포함되어 있습니다.
참고 : https://ui.toast.com/weekly-pick/ko_20191212 개발 모드로 작성하게 되면 class와 for은 에러가 출력된다.
또한 JSX는 JS와 유사하기 때문에 함수의 이벤트리스너에서 event 인자를 받아 볼 수 있다.(이름은 사실 상관없다.)
event 인자는 기존JS와는 좀 다르게 출력이 되는데 nativeEvent라는 것이 JS에서 기대하던 내용이 담긴 것이다.
(이렇게 표시가 되는건 JSX에서 가짜 이벤트를 발생시키기 때문이다. 보다 최적화된 걸 제공하는데 JS 것도 함께 제공되는 듯 하다.)
navtiveEvent > target(input 을 가르킴) 에 들어가보면 많은 정보가 담겨있다.
input 에서 value 값을 설정해 주는 것은 외부에서도 수정해 주기 위함이다.(ex. 리셋 버튼)
