[React JS] React JS, JSX

기존 바닐라 JS는 HTML을 먼저 만들고 JS를 만들어서 덧붙이는 방식이라면,

React JS는 JavaScript을 먼저 만드는 방식이기 때문에 업데이트를 HTML에서 할 필요 없이 JS로만 업데이트가 가능하다.

 

사용하기 위해서는 script에 React JS, ReactDom을 추가해야한다.

React JS는 인터렉티브의 원동력, ReactDom은 React element를 가져가다 HTML로 바꿔주는 역할을 한다.

 

https://unpkg.com/react@17.0.2/umd/react.production.min.js
https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js

 

JSX는 JavaScript를 확장한 문법이다. 생긴게 HTML과 비슷해서 JSX로 React 요소를 만드는 게 개발자들 입장에선 편하다.

 

HTML형식(JSX)으로 작성한 코드를 브라우저가 이해할 수 있는 형태로 변환 해줘야 하는데, 이때 Babel을 사용한다.

https://unpkg.com/@babel/standalone/babel.min.js

 

JSX에서 컴포넌트의 첫 글자는 반드시 대문자여야 한다. 만약 소문자라면 React랑 JSX는 이게 HTML Tag

라고 생각하기 때문이다.

 

function A() {

 return ()

}

는

const A = () => {}

와 같은 의미이다. 더 간편하고 유용하다.

 

학습 참고 영상

https://www.youtube.com/watch?v=SBsXYkhcLu8&t=427s 

 

+ vanilla js의 경우 함수 기능으로 html요소 업데이트가 있을 경우 해당 태그 전체를 다시 불러오지만,

react js의 경우 업데이트 시 태그 전체만 불러오는 것이 아닌 바뀌기 전과 후를 비교하여 업데이트된 특정 요소만 변경 시키기 때문에

훨씬 용이하다