react에 대하여

아직 react를 다룬 지 얼마 되지 않은 새싹이지만 개인적으로 느꼈던 생각을 적어둔다. 계속해서 react 라이브러리를 써보고 추가할 예정이다.

 

수많은 동영상이나 책에서는 react 라이브러리를 쓰면 어떤 이벤트가 일어날 때 페이지의 깜빡임이 없으며 (새로고침) 이는 virtual dom이 있기 때문이라고 익히 들어왔다. 솔직히 이렇게 백 번, 천 번 이야기해도 직접 써보지 않으면 와닿지 않았기 때문에 이러한 이론적인 이야기를 제외하고, 내가 개인적으로 느낀 장점을 솔직하게 적어본다. 

 

'왜 react를 썼나요?'라는 질문이 들어오면, 나부터 납득해야만 했으니까.

 

---

 

1. 처음 react를 써보았을 때

react를 사용하여 개발하기 위해서는 node.js부터 시작하여 설치해야 할 게 너무 많았다. 낯선 모듈들이 설치되고 잠시 뒤에 많은 파일과 폴더들이 설치되는데 이때부터 진입장벽이 너무 높았다. 뭘 건드리면 사이트가 돌아가지 않을 것 같고 index.html은 public 폴더 안에 있으며 src 폴더 안엔 또 익숙한 파일명의 낯선 확장자가 붙어있었다. 뭐 하나 코드 삭제하기가 두려워졌지만 유투브와 책, 강의 등을 보며 하나씩 코드를 건드려보았다.

 

2. 컴포넌트 관리

react의 장점 중 하나라는 '컴포넌트를 분리해서 사용하기, 그리고 유지보수를 보다 쉽게 하기'라고 들었는데 직접 컴포넌트로 나누어 관리하면서 드는 생각은... '이거 php로는 더 간단하게 사용할 수 있는데...' 라는 생각이 앞섰다. php로는 export import 할 필요 없이, 그냥 include 하면서 관리하면 코드가 간결해지기 때문이다.

 

게다가 컴포넌트가 많아지면 그 컴포넌트가 점점 깊어지며 관리하기가 더 어려워졌다. 이 태그는 저 파일에, 저 파일에는 이 태그를... 아직 숙련되지 않아서 그럴 수 있겠지만 사실 이 장점은 크게 와닿지 않았다.

 

그렇게 생각하며 간단한 API 웹사이트를 리액트로 만든 뒤에도, '별 차이 못 느끼겠다. state, props 관리만 더 어려워질 뿐인 것 같은데... 없는 건 또 모듈설치를 해야하고... state는 또 setState로 바꿔줘야 한다고 하고... 불편하기만 한데...'에 그쳤었다.

 

3. JSX

그러다가 리액트로 JSX를 다루면서 문득 든 생각이 있었다.

어라...? 그러고보니 나 지금 document.querySelector로 DOM을 불러오지 않아도 자연스럽게 이벤트를 다루고 있네...?

그렇다. 순수JS를 다룰 때는 무수히 많은 const, let, querySelector(".nav"), 을 쓰면서 이벤트를 다루었는데, 리액트로는 이런 코드를 전혀 쓰지 않았다. 나는 나도 모르게 자연스럽게 JSX 안에서 이벤트를 만들어 쓰고 있었던 것이다. 이것을 깨닫는 순간 갑자기 리액트가 너무 대단한 라이브러리라고 느껴졌다...!

사실 순수JS를 쓸 때는 어떠한 이벤트를 다루려고 할 때 한숨부터 나왔다. input은 언제 가져올 것이며, 그 안에 있는 list는 또 언제 가져올 것이며, 이벤트 버블링을 쓴다 할지라도 몇 줄의 코드를 써야하는지 까마득해졌기 때문이다.

하지만 리액트는 리액트의 state를 잘만 이용하면 순수JS로 block, none 등을 조작하지 않아도 삼항연산자로 UI on/off가 가능하다. (동시에 리액트를 쓴 많은 사이트의, 내 머리로는 어떻게 이게 가능한지 이해할 수 없었던 class명이 이해되기 시작했다)

 

 

아주 잠깐 react를 써보았는데도 이러한 장점이 느껴져서 사람들이 왜 리액트에 열광하는지 알 것 같았다.

더 많이, 더 깊게, 더 오래 리액트를 다루어서 리액트가 가진 장점을 느끼고 싶다.