React의 큰 틀에 대해서 생각해본다

Vanilla JS로 시작한 나에게 React는 자칫 생소한 프레임워크로 느껴졌다. HTML/CSS와 완전히 분리하여 로직을 작성하였던 Vanilla JS와 달리, React.js는 UI와 EventHandle을 거의 동시에 진행할 수 있다는 측면에서 매력적으로 느껴졌다. 우선 React 프레임워크는 index.js라는 접착제를 가지고 index.html에 첨부를 하는 구조로 이루어져 있다. 

 

여기서 우리가 보는 UI는 단순히 한 화면이 아니라 여러 화면으로 이루어져 있을 수 있기 때문에 이들을 관리해줄 것이 필요하다. 그게 React Router DOM이다. 또한 다양한 UI의 요소들이 변화함에 따라, Event들이 발생하는데, 그렇게 많은 UI의 상태변화를 관리해주는 것이 Redux라는 라이브러리다.

 

각 화면은 여러 개의 Component로 구성되어 있다. 이 Component 상에서는 여러 이벤트가 발생하는데, 이 때 각각의 UI 요소들이 어떻게 변화하는지를 마치 변수처럼 혹은 레고블럭처럼 다룰 수 있게 해주는 녀석이 바로 React Hook 이라는 녀석이다. 대표적으로 useState와 useEffect가 있는데, 각각 UI 상에서 상태가 변화하거나, 혹은 Component가 실행되거나 꺼질 때, 그러한 UI 동작을 마치 변수처럼 다룰 수 있게 해준다.

 

그리고 이러한 UI 상의 변화가 일어날 때 어떠한 Event가 일어나야 하는가에 대한 로직이 바로 JSX 부분에 EventHandler들을 이용하여 작성된다. 뿐만 아니라 UI의 디자인적인 측면에서 Bootstrap을 활용한 React Bootstrap을 통해 그러한 디자인적 요소를 해소하게 된다.