[넷플] React.js 기본

0. 기본

1. 장점 : 간단한 문법. 페이지 내부에 변화가 있을 시, 전체를 새로 생성하지 않고 바뀐 부분만 rerender해 줌
2. import

// react (인터랙션 담당)
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
// react-dom
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
// html형식 -> react dom 형태로 변환
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel"></script>

1. JSX

1. 원래 react 문법 : React.createElement 메소드를 이용해 {element, property, value} 를 입력

1. JSX : 사용자가 html 문법으로 적으면 babel이 원래 react 문법으로 바꿔 줌
   • 함수를 선언해서 return 값으로 html element를 적음. 이때 함수 이름은 반드시 첫 글자가 uppercase여야 함. ReactDOM.render( <ElementName /> , 위치 ) 로 html에 삽입.

** react에서의 백틱문자열 : JS에서의 ` ${  } ` 를 단순히 {  } 로 표현한다.