본문 바로가기

Client/React

(2)
Virtual DOM, Life Cycle, Hooks 그리고 State Management 리액트를 잘 다루기 위해서는 리액트의 탄생배경, 그리고 그에 따른 설계컨셉과 디자인들 순으로 이해를 해야 한다. 1. Virtual DOM 리액트라는 것은 왜 만들어졌는가? UI적인 이유도 있겠지만, Virtual DOM이 리액트의 탄생배경이라고 생각한다. JavaScript로 프론트를 동적으로 구성하다 보니, 점차 JavaScript가 HTML 요소를 점점 더 많이 건드리기 시작했다. JavaScript는 본래 이름이 LiveScript일 만큼, HTML이라는 문서를 동적으로 만들고 싶어서 탄생한 언어인데, 문제는 이 JavaScript라는 것이 너무나도 많은 HTML 요소를 건드리기 시작하면서 문제가 발생하였다. 그래서 JavaScript가 HTML 요소를 좀 더 적게 건드리게 할 수 없을까라는 고민..
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라는 라이브러리다. ..