[React] React 시작하기 - 1

매주 주말에는 블로깅을 하려고 했지만 지난주에는 개인적인 사정(물론 변명이겠지...ㅠㅠ)으로 내용정리가 밀려버렸다.

그래서 2주간의 Foundation 을 정리해 보려고 한다.

SPA, CSR 💻

SPA(Single Page Application)와 CSR(Client Side Rendering)는 리액트만의 장점은 아니지만 리액트 라이브러리의 주요한 장점이다. 이전의 SSR(Server Side Rendering)을 사용할 때에는 변화가 있을 때마다 새롭게 전체 페이지를 다시 로드해야 했다.

CSR은 변화가 있는 특정부분만을 변화 시킨다. 또 서버에서 HTML, CSS, JS파일을 렌더 하는 방식은 안드로이드 IOS등과 같은 다른 플랫폼과 서버를 공유할 수 없어서 비효율적이다.

CSR은 서버에서 데이터를 받아서 클라이언트에서 렌더링 하는 방식이다. 이러한 변화가 위의 문제를 해결해주게 되었다. 서버로부터 데이터를 받아서 바뀐 부분의 데이터가 있는 화면만 새로 렌더링함을써 사용자 경험을 높여주면서 효율적으로 클라이언트 리소스를 사용한다. 이렇게 서버가 데이터를 보내주면 안드로이드, IOS 등 다양한 플랫폼이 서버를 공유할 수 있어 효율적인 서버 운영이 가능하다.

• CSR은 검색엔진이 SEO 최적화를 할수 없는 문제가 있는데 리액트에서는 CSR과 SSR을 함께 사용할 수 있어 다른 프레임워크보다 더 사랑받은 이유 중 하나라고 한다.

React

React는 페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 Javascript 라이브러리이다. 리액트 같은 프론트엔드 라이브러리 혹은 프레임워크를 사용하는 가장 큰 이유중 하나는 UI를 자동으로 업데이트 해준다는 점이다. 리액트는 가상돔(Virtual Dom)을 통해 UI를 빠르게 업데이트 한다. 가상돔은 이전 UI의 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술이다. 이 기술 덕분에 불필요한 UI 업데이트는 줄고, 성능은 좋아진다.

JSX

const element = <h1>Hello, world!</h1>;

위의 문법은 javascript도 아니고 HTML도 아니다. JSX라 정의하고 있으며, Javascript 확장문법이다.

JSX라 하며 JavaScript를 확장한 문법입니다. UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장합니다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다.

CRA(Create-React-App)

리액트 프로젝트를 시작하는데 필요한 개발환경을 세팅해주는 도구(toolchain)

리액트는 UI기능만을 제공하므로 개발자가 직접 구축해야 하는 것들이 많다. 전반적인 시스템을 직접 구축할 수 있으니 원하는 환경에 맞게 최적화할 수 있지만, 반대로 신경쓸 것이 많기때문에 처음 시작하는 단계에서는 직접 개발환경 구축이 어려울수 있다.

리액트 팀에서는 이러한 문제를 해결하기 위해 CRA(Create-React-App)을 만들었다. CRA는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공한다. CRA를 이용하면 하나의 명령어로 리액트 개발환경을 구축할 수 있다.

CRA에는 바벨과 웹팩과 같이 리액트 애플리케이션 실행에 필요한 다양한 패키지가 포함되어 있으며, 테스트 시스템, ES6+ 문법, CSS 후처리 등 거의 필수라고 할 수 있는 개발 환경도 구축해 준다. 이러한 개발 환경을 직접 구축할 경우 시간이 오래 걸릴 뿐 아니라 유지 보수도 해야한다. CRA를 이용하면 개발 환경 세팅을 해주기 때문에 기존 기능을 개선하거나 새로운 기능을 추가했을 때 패키지 버전만 올리면 된다.