[React] 리액트(React)란, 왜 React를 사용하는가?

리액트 공식 홈페이지에 따르면 리액트는 자바스크립트 라이브러리다.

 

컴포넌트

리액트의 경우 컴포넌트 단위로 뷰들을 관리하는데 이를 통해 상태를 관리하고 불필요한 리렌더링을 최소화 할 수 있다. 컴포넌트, 뷰 이런 용어들에 대해서는 따로 정리를 하도록 하고, 쉽게 말해, 재사용성이 뛰어나고 유지보수, 추후 관리가 수월 하다는 점이 장점이다.

가상돔(Virtual DOM)

예전에 자바스크립트 공부를 하며 DOM에 대해 살짝 알아봤는데, 가상돔이라니 머리가 아프지만 왜 가상돔이 장점인가에 대해 알아보겠다. 리액트의 경우 render → 가상돔에 결과물을 저장 → 원래 돔과 가상돔의 결과를 비교 → 달라진 점을 최종 돔에 저장 이라는 프로세스를 거친다. 이는 매번 변화되지 않은 부분까지 렌더링을 하지 않고 달라진 부분만을 연산해서 속도 및 성능 측면에서 좋다. 여담으로 스벨트의 경우 가상돔자체도 없이 반응형으로 변화된 부분을 바로 최종 돔에 저장시키는 방식이라고 하나, 아직은 리엑트의 가상돔에 대한 장점을 알았으니 사용을 하며 왜 장점이라 했는지 느껴봐야 겠다.

JSX

react는 JSX라는 확장자를 가진 파일에서 코드를 작성한다. JSX는 html과 JS를 한 파일에 작성을 하여 추후 build를 하면 리액트가 분리하여 파일들을 만들어 준다.

react의 장점

• SPA
• html을 함수, array, object에 보관하고 재사용 가능 (큰 프로젝트일 수록 html 관리가 편리해짐)