React ~0412(React와 기존JS의 상호작용방식 차이)

무언가의 특징을 알기 위해 흔히 우리는 그 특징을 나열하는 방법도 있지만,

다른 것과 비교, 대조하며 그 특성을 돋보이게 하곤한다. 리액트의 시작도 마찬가지이다.

왜 리액트를 사용하는가? 어떤 점에서 리액트가 더 좋은 특성을 가지고 있는가? 하고 비교해볼 필요가 있는 것이다.

그래서 1-1수업에서는 우리가 기존 js를 통해서 html과 상호작용했는지 먼저 알아보았다.

버튼을 누르면 몇번 눌렀는지 우리에게 보여주는 js코드

자 html에 먼저 우리가 직접 span, button을 만들고 js에서 사용하기 위해 span, button을 가져왔다. 우리가 몇 번 눌렀는지 기록해줄 변수 counter를 만들고, 그 후 EventListner를 통해서 실행될 함수(counter라는 변수에 1씩 더하고 counter를 span안에서 넣어 우리에게 보여주는 함수 handleClick을 제작했다. 

 

※정리 기존 JS에서는 이미 제작된 HTML의 요소들을 가져와 우리의 입맛, 필요대로 추가, 수정하고 그 결과를 HTML에 갱신하는 방식이었다. 이 와달리 REACT는 어떻게 진행되는지 보도록 하자.

 

가장 먼저 우리가 React를 사용해서 상호작용하기 위해서는 React js를 import해주고(첫번째  script태그)

그다음 이 React로  가상의 DOM에서 우리의 입맛대로 수정한 React요소들을 HTML에 넣어줄 수 있도록 (두 번째 script태그)

두 가지를 선언하였으면 ReactDOM.render에서 render는 (만들 요소, 들어갈 위치)를 통해서 html에 접근해 요소들을 배치한다.

React.createElement("span", {span의 property}, “span의 내용”)을 통해 html에 span에 속성(id, class) 그리고,  그 안의 들어갈 내용 또한 작성한다.

 

 이와같이 React js는 접근을 js에서 html로 한다. 일체 html에 아무것도 없는 상태에서 react를 통해 생성하고 html에 업데이트한다. 하지만 위와 같은 방법은 React의 동작 구조를 이해하기 위해 한 방법이었고 더 편한 방법이 존재한다고 한다.