리액트를 시작하며
리액트는 SPA(Single Page Application) 구조를 지니는 Java Script의 UI 라이브러리이다.
주로 기능별로 나눈 다양한 컴포넌트(Component)를 모아서 페이지를 구성하게 되고 JSX 문법을 사용해서 작성하게 된다.
JS 기반 유명 프레임워크, 라이브러리 중에서 가장 널리 쓰이고 있다. (출처 - trends.builtwith.com)
프론트엔드 기술 스택으로는 거의 필수적이기 때문에 리액트의 주요기능(hook)과 문법, 개념을 이해하고 학습하는 것이 중요하다.
리액트의 주요 기능
-
State
리액트에서 핵심이 되는 기능으로 특정한 값 상태에 따라서 해당 값에 관련된 요소만 업데이트 되기 때문에 페이지가 효율적으로 동작하는 것이 가능하다.
SPA로 동작하는 리액트의 작동방식과 크게 관련이 있고 페이지 작동 시 리로드가 발생하지 않기 때문에 UX측면에서 우수하다. -
Props
다양한 요소들의 상태 값의 변화에 따라서 화면이 업데이트되고 렌더링이 일어나기 때문에 컴포넌트 간에 값을 전달하고 사용하는 것이 중요하다.
단, 리액트는 단방향 바인딩으로 상위 컴포넌트에서 하위 컴포넌트로만 Props 값이 이동할 수 있다.
-
Drilling
부모, 자식 관계로 표현되는 컴포넌트 간 단방향으로 이동하는 Props의 특징때문에 Props Drilling이라는 개념이 존재한다.
페이지가 복잡해지고 컴포넌트가 많아질수록 중간 컴포넌트에서는 Props를 사용할 일이 없어도 단순히 전달만을 위해 값이 컴포넌트를 거치게 되는 일이 발생할 수 있다.
이러한 이유로 Redux, Recoil 등을 통해 전역상태관리가 필요하게 된다.
리액트의 장점
리액트의 장점은 SPA로 설명할 수 있다.
SPA의 특징으로 인해 기존 MVC 패턴의 단점을 개선할 수 있기 때문이다.
- SPA(Single Page Application)
한 개(Single)의 페이지로 구성된 웹 애플리케이션(Application)으로 웹 어플리케이션에 필요한 모든 정적 리소스(HTML, CSS, JavaScript)를 최초 한 번에 모두 다운로드한다.
새로운 요청이 생기는 경우에만 페이지 갱신에 필요한 데이터를 전달 받아서 페이지를 갱신한다.
렌더링에 필요한 리소스는 이미 클라이언트에 존재하고 변경이 필요한 일부 요소만 갱신되는 방식으로 렌더링이 이루어지기 때문에 SPA의 경우 CSR(Client Side Rendering)방식의 렌더링이라고 한다.
(단, 모든 SPA가 CSR인 것은 아니다.)
👍 SPA 장점
-
자연스러운 사용자 경험(UX)
리로드가 일어나지 않기 때문에 빠르고 화면에 깜빡거림이 없다. -
필요한 리소스만 부분적으로 로딩 (성능)
서버에서 정적 리소스를 한번 요청 후 데이터를 캐시(Cache)에 저장하여 필요한 부분만 부분적으로 로딩하기에 빠르다. -
서버의 템플릿 엔진 연산을 클라이언트의 템플릿 연산으로 분산(성능)
-
템플릿 구성에 필요한 컴포넌트별 개발을 나누어 진행 (생산성)
-
모바일 앱 개발 시에도 동일한 API를 사용해서 설계 가능 (생산성)
단점으로는 초기구동 속도 저하, 검색엔진최적화(SEO)가 어려움, 보안 이슈 등이 있지만 각각의 개선 방법들이 존재한다.
