리액트 핵심만 훑어보자 #1 개요

 

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다.

 

리액트를 공부하게 된 이유

나는 여태껏 JSP와 제이쿼리를 통해 프론트단을 구현해 왔다. 이번에 토이 프로젝트로 REST API 서버를 개발하며 프론트단이 리액트일 경우 어떻게 요청을 하는지, 어떤 데이터가 어떻게 정렬되어 조회되어야 가공해서 렌더링 하기에 용이한지 공부하고 싶었다.

사실은 토이 프로젝트를 진행할 때마다 프론트엔드 개발자님을 구하고 싶은 마음은 굴뚝같지만 당장 본인 일정 조정에도 어려움을 겪어 결국 자급자족하기로 결정했다.

그리고 뷰보다는 리액트가 참고할 수 있는 정보가 많을 것 같아서 리액트를 도입하기로 결정했다.

책의 전반적인 부분을 나름대로 필터링해서 정리해 볼 생각이다. 🔥

 

리액트가 뭔데?

• 대표적인 자바스크립트 UI 라이브러리다.
• 쉽게 말하면 사용자와 서버 사이에서 상호 작용을 도와준다.
• 리액트는 프레임워크가 아닌 라이브러리이므로 흐름의 제어 권한이 리액트가 아닌 사용자에게 있다.
• 또한 리액트는 SPA를 만들어낸다.
• SPA는 Single Page Application의 약어로 하나의 페이지만 존재하며, 사용자가 특정 페이지를 요청할 때 페이지 내용을 렌더링 해서 보여주는 개념이다.

 

리액트 장점이 뭘까?

Virtual DOM을 사용하므로 렌더링 속도가 빠르다.

• 사용자가 페이지를 요청할 때마다 페이지의 모든 부분을 수정해서 렌더링 하지 않고 Virtual DOM을 이용해 업데이트해야 할 최소한의 부분만 업데이트한다.
• 컴포넌트 기반 구조를 통해 재사용성을 꾀할 수 있다.
• 메타라는 큰 스폰서가 뒤에 있고, 사용자가 많아 커뮤니티에서 활발한 지식 공유가 가능하다.
• 리액트를 공부한 이후에 리액트 네이티브와 자바스크립트를 통해 모바일 애플리케이션을 만들 수 있다.
• 네이티브 앱보다는 성능이 조금 부족하지만 간단한 수준의 앱은 사용자가 차이를 느끼지 못할 정도로 미미하다.

 

그러면 단점은 없을까?

• 물론 아니다. 일단 학습량이 방대하다.
• 계속해서 버전 업데이트가 되고 있어 새로운 내용들이 꾸준히 등장하기도 한다.
• 또한 상태 관리 복잡도가 높다.
• state는 컴포넌트의 상태를 의미하는데, 렌더링 속도가 빠른 대신 컴포넌트의 state를 관리해야 한다.
• 컴포넌트의 개수가 많아지면 상태 관리의 복잡도도 증가한다.
• 그래서 큰 규모의 프로젝트에서는 Redux 등의 외부 상태 관리 라이브러리를 사용하는 경우가 많다.

 

이미지 출처

[React] Component 를 사용하는 기본적인 방법

소플 - soaple.io