Today Swimming Learnd - 2020.08.30 : 바닐라 자바스크립트로 돌아가기

 React를 하면서 나의 기본기가 많이 부족하다는 것을 느꼈다. 그래서 시작한 것이 바닐라 자바스크립트로 코드 조각 만들기 프로젝트이다. repl.it에 따로 code-sample이라는 폴더를 만들어두고 기본적인 컨셉들을 하나씩 구현하는 중이다.

바닐라 자바스크립트로 카드 슬라이더와 파도, 물방울 애니메이션을 만든 다음, 똑같은 기능을 React 싱글 페이지로 만들어 보았다. 똑같은 것을 바닐라 자바스크립트와 React로 만들어 본 결과 느낀 점은 "바닐라 자바스크립트가 더 편한데?"이었다. 복잡하지 않은 것들이어서 그랬는지도 모른다. 개인적으로 위 세가지 기능을 React로 만들 때는 state를 만들고 DOM을 직접 건드리지 않으면서 애니메이션 조절하는데 많은 시간을 투자했다.

React와 같은 프론트엔드 프레임워크를 사용하는 이유 중 하나는 직접 DOM을 건드리지 않아도 되게끔 하기 위한 것이라고 들었다. 그전에는 React를 사용하면서 직접 DOM을 건드리는 경우가 많았다. 구조나 데이터 흐름을 고민할 필요없이 class나 id로 찝어서 바로 조작하면 되니까 말이다. 프레임워크를 쓰면서 DOM을 직접 건드리면 프레임워크를 쓰는 의미가 없다는 가르침을 받고나서도 사실 잘 납득이 가지 않았다. 그리고 직접 DOM을 건드리지 않고 그러한 기능들을 어떻게 만들 수 있는지 상상이 가질 않았다.

이번에 위 세 가지 기능을 React로 만들어 보면서 onClick이나 setInterval과 같은 기능을 React의 특성에 맞게 구현하는 법을 배웠다. 그리고 아직 완전히 이해하지는 못했지만 React의 가상돔 렌더링 과정도 공부하면서 직접 DOM을 조작하면 좋지 않은 이유를 알 수 있었다. (React는 이전의 상태에서 변경된 부분만 캐치하여 가상돔을 만들고 그것을 실제 돔에 반영한다. 그러니 만약 코드에서 직접 DOM을 조작한다면 React의 이러한 편리기능을 써먹지 못하는 셈이다)

앞으로도 바닐라 자바스크립트로 할 수 있는 여러가지 토이 프로젝트를 해보고, 그것을 또 React로 구현하는 연습을 계속 하려고 한다. 부디 이러한 연습이 나의 실력 향상에 도움이 되기를 바란다.