< 바닐라 JS vs 리액트 JS >
- 바닐라 JavaScript에서는
- HTML을 먼저 만들고, 그걸 Javascript로 가져와서 HTML을 수정한다.
(HTML을 만들고, 찾아서 가져오고, 그리고 나서 업데이트...)
- React JS에서는
- HTML코드를 직접 작성하지 않고, Javascript와 React JS를 이용하여 element를 생성한 후 react-dom을 통해 element를 HTML코드로 바꾼다.
(Javascript에서 시작하고, HTML에서 끝남)
< React JS의 본질, 핵심은 뭔데? >
React.createElement()를 통해 React JS가 element를 생성함
- 이것은 React JS는 업데이트가 필요한 element를 업데이트 할 것이라는 말인데..- React JS를 이용해 element를 업데이트 할 때, React JS가 그 업데이트를 HTML에 보여주는 역할을 함
- (= React JS가 결과물인 HTML을 업데이트 할 수 있다는 것)
- (= 유저에게 보여질 내용을 컨트롤 할 수 있다는 뜻)
❗️interactive한 어플리케이션에서 하는 작업들 모두가 event들을 감지하는 일이므로, addEventListener를 반복하는 대신에 property안에 event listener를 등록할 수 있도록 하는 것은 엄청엄청 큰 강점이다.
< 라이브러리 이용 >
1) 우리의 컴퓨터(로컬)에 두는 방법
2) 우리의 서버에 두지 않고 네트워크 서비스를 이용하는 방법
- CDN을 통해서 리액트 라이브러리를 사용할 땐 라이브러리를 링크로 처리하게 된다. CDN(Contents Delivery Network)을 사용하는 것은 말 그대로 네트워크 서비스를 이용하는 방법이다.
< 아래 코드의 script 태그를 살펴 보자 >
- line 6에서 react를 import 하고, line 7에서 react-dom을 import 하고 있다.
- react를 통해 element를 생성할 수 있다.
- react를 import했기 때문에 createElement function을 가진 React object에 접근할 수 있다.
React.createElement(): element를 생성
- react-dom은 모든 React element들을 HTML body에 둘 수 있도록 해준다.
- react-dom을 import했기 때문에
ReactDOM.render()을 사용할 수 있다. ReactDOM.render(): React element를 가지고 HTML로 만들어(바꾸어) 배치한다. (= 사용자에게 보여주는 것)
line 4/
body안에id="root"인div를 만든다.
line 9/const root = document.getElementById("root")
Javascript문법으로 root를 가져온다.
line 15/ReactDOM.render(span, root)라고 적어준다.
- 이것이 "ReactDOM에게 span을 root안에 render 해달라고" 하는 것이다.
React.createElement()에 작성할 수 있는 argument:
- HTML 태그(root에 들어갈 HTML 태그)
- property object(id, class, style, event listener)
- content
- 바닐라 JS 코드 예시
