[리액트] 실습하기

https://reactjs.org/docs/cdn-links.html

CDN Links – React

 

react를 실행하기 위해 js로 import하기

 

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>      // react import

<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>     
// react-dom import

 

 

 

 

 

 

스크립트에서 리엑트 엘리먼트 span을 생성했지만, 아직 페이지에는 나타나지 않는다.

이전 바닐라 스크립트 실습에서는 바디에서 작성을 해보았지만, 

React JS가 HTML을 생성하도록 만들 것인데 그러려면 React-DOM을 사용해야 한다.

이 React-DOM은 모든 리액트 엘리먼트들을 HTML body에 둘 수 있게 해준다.

 

 

리액트돔으로 리액트 엘리먼트를 작성해서 렌더링 하려고 하는데, 

에러가 났다. 리액트 18버전에서는 리액트돔.렌더 메서드가 더 이상 지원이 안되는가 보다.

 

 

 

그래서 강의에서와 같이 17버전으로 바꿔서 리액트와 리액트돔을 실행시켰다.

그랬더니 잘 작동.

 

 

 

React.createElement로 요소를 생성할 때, 

첫 번째 인자는 요소, 두 번째 인자는 속성(프로퍼티 props), 세 번째 인자는 요소의 내용(content)가 들어간다.

 

render 메서드의 첫번째 인자는 HTML에 생성할 요소가, 두 번째 인자는 그 요소가 append될 부모요소가 된다.

 

★ 이와 같이 React JS에서는 모든 것이 JS로 시작해서 그 다음에 그를 통해 HTML이 되는 것이다 !!

     먼저 HTML을 만들고 시작하는 것이 아니라,

     React JS를 통해 모든 것이 업데이트된 상태의 HTML을 바로 화면에 표시하는 것으로,

     그것은 React JS가 유저에게 보여질 내용을 바로 컨트롤할 수 있다는 뜻이 된다.

     ( 기존의 방식은 HTML을 먼저 만들고 JS에서 DOM으로 HTML을 찾아서 가져와 업데이트를 해왔었다. )

 

    다시 설명하면, JS를 이용해 요소를 생성하고, React DOM이 리액트 엘리먼트들을 가져다 HTML로 번역하는 것이다.

 

 

 

위와 같이 각 요소의 props에 이벤트 리스너를 작성해주면, 이전 바닐라 스크립트와 달리 간단해진다 !

cf. MouseEnter는 뭣인고 하고 콘솔 창 출력되는 것을 보면서 계속 이벤트를 발생시켜 보며 파악해보려 했는데,

     그냥 click과 달리 해당 요소에 클릭을 하고 그 밖의 영역을 클릭을 하고 다시 그 요소에 클릭을 해야 이벤트가 발생하는

     것을 볼 수 있었다.

     엔터라는 것이 엔터키를 쳐야하듯 해당 요소의 밖의 영역을 클릭하는 것이 그 행위와 유사하게 여겨지나보다.

 

 

 

인터렉티브한 앱에서 하는 작업들 모두가 이벤트들을 감지(Listen)하는 것이란 측면에서, 

addEventListener를 반복하는 것 대신 React JS의 props에서 이벤트를 등록함으로써

바닐라 JS에서 여러 줄로 작성해야 했던 작업들을 한층 간편하게 만들어주게 되는 것이다 ! 

props에서 on이 붙는 것은 이벤트라는 것을 알 수 있고, 이것들은 HTML에 나타나지는 않는다. 

 

 

 

여기까지는 원론적으로 작동하는 방식을 보여주는 것이고,

현실적으로는 createElement를 사용할 일이 없을 것이다.

 

createElement 대체할 수 있는 방법

 

https://ko.reactjs.org/docs/introducing-jsx.html

 

JSX 소개 – React

 

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

 

 

위의 에러는 브라우저가 온전히 JSX를 이해하는 것은 아니라서 발생하는 것

=> 바벨 설치! 브라우저가 JSX를 이해할 수 있게 변환해주는 프로그램

 

 

바벨을 통해 위의 코드가 아래의 코드로 바뀌는 것.

 

https://babeljs.io/

Babel · The compiler for next generation JavaScript

 

 

 

위에서 작성한 JSX를 오른쪽과 같이 변환해 주었다. 둘 다 같은 의미이지만, 개발자 입장에서는 왼쪽의 방식을 더 선호할 것이다.

 

 

 

실제 이런 식으로 사용하지 않고 바벨을 다운받지만, 

오늘 실습에서는 스크립트의 링크로 사용해본다. 

 

 

 

 

 

이것은 우리가 작성해서 Babel에게 넘겨준 코드이고, (body 태그 안)

 

 

Babel은 우리가 넘겨준 코드를 브라우저가 읽을 수 있는 코드로 바꿔서 head에 담아놓은 것을 개발자 도구 element에서 확인할 수 있다 !