React Study 01

2021년에 이미 완강을 한 바가 있으나, 그때는 수박 겉핥기 식으로 빠르게 경험해본다 라는 안일한 생각으로 배웠던 리액트에 대해 조금 더 깊이있게 공부하고, 블로깅을 하면서 강의에서 핵심인걸 정리해보고자 한다.

 

React는 UI를 Interactive하게 만들어준다.

 

React JS - 어플리케이션이 Interactive 하도록 만들어주는 library // 엔진 역할

React DOM - library 또는 package. 모든 React element들을 HTML body에 둘 수 있도록 해준다 

 

좀 더 상세한 이해를 위해서 검색을 해보았다.

React는 View를 만들기 위한 라이브러리

ReactDOM은 UI를 브라우저에 렌더링 할 때 사용하는 라이브러리

 

바닐라JS에서는 HTML을 미리 만들어두고, 그걸 JS로 가져와서 거기서 HTML을 수정하는 방식이였다면,

리액트에서는 모든 것이 JS에서 시작하고, 그것이 HTML이 된다..

이것이 리액트의 핵심.

React JS를 사용해서 element를 생성할때는 

React.createElement 와 같이 element를 리액트가 생성하고, element를 바로 업데이트해서 결과물인 HTML을 업데이트가 가능하다는 말.

즉, 유저에게 보여지는 내용을 React로 컨트롤이 가능하다는 것이다.

 

바닐라 JS처럼 HTML을 미리 만들어두고, JS에서 그걸 찾아서 그 다음 업데이트하는 방식을 사용하지 않고 훨씬 간편하게 할 수 있다는 소리..!!

 

바닐라JS는 HTML -> JS 순서
리액트는 JS -> HTML 순서