[React] 나는 왜 리액트를 사용하는가
intro 프로젝트를 하다 보니 문득 리액트만을 고집해서 사용하는 나를 발견할 수 있었다. 물론 그 이유 중에는 많은 회사에서 사용하고 있다는... 큰 이유도 있지만 개인적으로 리액트가 정말 프로젝트할 맛이 난달까... 자바스크립트 쓰다가 리액트로 넘어오니 너무 편하다...! 더 잘 다루고 싶다는 욕심이 생겨 '나는 왜 리액트를 사용하는가'에 대해 블로깅을 써보기로 마음먹었다.
리액트 공식 사이트에 들어가면 이런 문구가 나를 반기고 있다.
A JavaScript library for building user interface
UI를 구축하기 위한 자바스크립트 라이브러리이다... 자바스크립트 기반의 라이브러리인 거 빼곤 크게 와닿지는 않는다. 그렇다면 리액트가 왜 만들었는지를 한 번 생각해 보는 것도 좋은 접근법이지 않을까 생각한다.
전통적인 웹 사이트(MPA)는 클릭 한 번에 새 페이지가 로드될 때까지 또는 작업이 완료될 때까지 기다려야 했다. 때문에 굉장히 투박했으며, 새로운 HTML 페이지를 늦게 표시할 수밖에 없었다. 이는 곧 유저 입장에서 화면 깜박임을 경험할 수 있게 만들었다. 그렇다고 MPA(Multiple-Page Application)가 무조건적으로 별로다!라는 건 아니다.
MPA는 검색엔진 최적화 관리에 용이하다. 하나의 페이지에 하나의 키워드에 대해 최적화할 수 있기 때문이다. 하지만 그럼에도 불구하고 개인적으로 SPA(Single-Page Application)가 더 많은 장점을 가지고 있다고 생각한다. (물론, 아직까지 SEO를 적극적으로 사용해 본 사례가 없기도 하다...) SPA는 하나의 브라우저에서 동작하며, 페이지 로딩이 필요하지 않는다. 이는 대부분의 리소스(HTML, CSS, JS)들이 한 번만 로드되기 때문이다. 또한, 필요한 기능만 업데이트가 되기 때문에 반응형을 구현하기도 쉽다. 이러한 기능만 보더라도 SPA가 MPA를 부족한 점을 보완하기 위해 등장했다는 것을 알 수 있으며, 이를 쉽게 구현할 수 있도록 만들어주는 기술 중에 하나가 바로 'React'인 것이다. 리액트의 큰 특징은 이러하다.
- CSR 방식을 채택하였다.
- 선언형(Declarative) 프로그래밍을 따르며, 컴포넌트 중심의 구성 방식이다.
- 재사용성이 좋다
- 단일 책임(Single Responsibility) : 컴포넌트를 하나의 책임만 가질 수 있도록 작은 단위로 나눈다.
CSR 이란?
Client Side Rendering의 줄임말로, 처음 요청 때 모든 정보를 받아와서 이후부터는 로드되는 과정 없이 사용할 수 있다. CSR 방식은 동적으로 화면을 바꿔주기 때문에 HTML 문서의 정보가 작고 이는 SEO(검색엔진 최적화)에 좋지 못하다.
위 특징을 좀 더 풀어서 설명해 보자면, 과정보다는 선언에 집중해서, 즉 뷰에만 집중해서 코드를 작성하면 된다. 때문에 가독성이 더 좋은 편이다. 이후 Virtual DOM이 바뀐 부분만 찾아서 진짜 DOM에 업데이트한다. 해당 기능 덕분에 우리는 쉽게 SPA를 구현할 수 있다. 하지만 리액트의 핵심은 바로 컴포넌트이다! 리액트는 기능 단위로 쪼개서 컴포넌트를 제작할 수 있어 재사용성을 좋게 한다. 프로젝트를 하다보면 이게 얼마나 편한지 체감할 수 있다...
리액트에는 HTML 파일이 딱 하나 존재하는데, 해당 파일의 내용을 자바스크립트를 이용해 리렌더링 해주는 방식으로 페이지를 구성한다. 때문에 페이지 별로 파일을 구성하지 않고, 표시해 주어야 할 내용을 각각의 컴포넌트 형식으로 구성한다.
즉, 서버는 하나의 HTML 페이지만 전송하고 이후에는 React가 UI를 인계받아 제어한다. 그렇다면 리액트는 어떻게 동작할까?
- return 문안에서 JSX(JavaScript XML) 문법으로 작성하여 화면에 render 시킨다.
- 외부에서 변경 가능한 속성은 Props(외부로부터 전달받은 상태)로 전달받아 사용한다.
- 상태에 관련된 건 모두 State(내부 상태)로 관리한다.
- 상태가 변경될 때마다 re-render 된다. (변경된 부분만 업데이트)
아직도 알아야 할 게 너무나도 많아 내가 리액트를 쓰는 분명한 이유는 장담할 수 없지만 자바스크립트보다 코드 쓰기도 쉽고, 재사용성이 너무 좋다. 그리고 HTML을 계속 만들 필요 없이, 쉽게 많은 페이지들을 제작할 수 있다는 점도 매력 요소라고 생각한다. 리액트를 조금씩 이해하고부터 프로젝트가 재미있어지기도 했다. 이 글을 작성하면서 머리로 이해했다고 생각한 것들이 쉽게 글로 안 적여질 때 부족함을 느끼기도 했다. 좋은 양질에 글은 안 되겠지만, 끊임없이 고민의 흔적을 남겨보도록 하겠다!
2023.03.08. 0:44
📜 출처