[React.js]바닐라JS >> React.js(1)

예전에 생활코딩 리액트 수업을 간단히 들었지만, 금세 잊어버렸었다.

 

리액트에 대해 제대로 배우고 싶은 생각에 노마드코더 리액트 기초수업을 진행하면서

 

같은 UI와 기능을 구현하는 데에 있어서 자바스크립트와 리액트의 차이를 알게 되었다.

 

JS에서는 변수와 함수를 생성하고, html의 요소를 가져온 후, addEventListener를 통해 "click"과 같은 이벤트를 부여한 뒤

 

웹페이지를 동적으로 제어하던 순차적인 방식이었는데, 리액트에서는 새로운 방식으로 접근한다.

 

페이지의 생성과 제어 모두를 script에서 구현하고, React.useState()를 통해 변수의 생성과 동시에 생성한 변수의 변화를 감지하는 함수를 동시에 내포한다.

 

이벤트를 다루는데에 있어서도 단순히 rendering 할 html 태그 내에 "onClick={함수명}" 과 같이 입력하면 클릭 이벤트를 부여할 수 있고, 함수 내에서는 useState의 두번째 인자(수정을 위해 리액트가 내장하고 있는 함수(Re-rendering을 자동으로 발생))를 활용하여 첫번째 인자로 지정한 변수를 수정할 수 있다.

노마드코더 React 수업 - Count 증가

무엇보다 놀라웠던 것은 보통 자바스크립트를 통해 html 요소를 제어하면 관련된 요소들이 전부 변하는 것에 비해,

리액트는 변화가 발생할 때마다 렌더링을 새롭게 함에도 불구하고, 리액트가 변화된 요소만 감지하여 수정해준다는 점이다.

 

실제로 프로젝트의 규모가 크고, 페이지가 복잡해질수록 그 안에서 interactive 한 요소들의 변화가 잦아진다면, 자원의 소모가 커질수밖에 없고, 이는 결국 UI품질의 저하로 이어질 수밖에 없다.

 

하지만 앞서 얘기한 리액트의 정교함으로 인해 그 효율은 극대화 될 것으로 생각한다.

 

아직 수업 초기단계이지만, 앞으로 리액트의 어떤 강력한 기능들을 더 접하게 될지 기대가 된다.