React랑 Next.js 왜 쓰는데? | 코딩애플 2022 new 리액트 1강 Review

 

React로 홈페이지를 만들어본지 좀 오래됐다.

기억이 많이 흐려져 복습 차 코딩애플 리액트 강의를 들었다.

개발할 때 어렴풋이 알고 있던 걸 깔끔하게 정리할 수 있는 좋은 강의 같다.

이전 강의도 존재하는데, 최신화 해주셔서 감사하다.

 

위의 1강의 주제는 리액트 뽕주입 (ㅋㅋ) & 설치였는데,

설치는 전에 해보기도 했고, 아주 간단한 수준이었다.

그리고 뽕주입 과정 (개발을 시작할 때 정말 중요하다고 생각한다) 에서

리액트를 사용하면 좋은 이유 세 가지를 알려주었다.

 

1. SPA (Single Page Application) 가능
2. 컴포넌트 단위로 개발 가능
3. 데이터가 html에 자동 반영됨 ex) useState

 

예전에 해외 FE 인턴십 면접을 볼 때, 프로젝트에 react를 사용한 이유를 물어봤었다.

그 때 무지몽매한 나는 영어로 더듬더듬 "회사에서 많이 쓰길래..." 라는 답변을 했고

면접관님이 많이 당황하셨던 기억이 있다.

내 영어 실력과 답변 모두가 황당하셨을지도 모른다. 

여러분도 이런 경험을 갖고 싶지 않다면 지금 미리미리 공부하도록 하자.

 

1. SPA (Single Page Application) 가능

익히 React의 장점으로 유명하다.

그렇다면 Single Page Application을 사용하면 장점은 뭘까?

트래픽의 감소, 반응성의 향상으로 인해 앱처럼 자연스러운 사용자 경험(UX)를 제공한다.

트래픽이 감소하고 렌더링에서 좋은 효율을 가지는 이유는,

새로운 페이지 요청 시 전체를 렌더링하지 않고 변경되는 부분만 갱신하기 때문이다.

또한, 새롭게 갱신되는 부분만 렌더링하기 때문에 새로고침이 발생하지 않아 빠른 화면 이동이 가능하다.

 

SPA가 등장하기 전, 기존 Web App의 구성방식인 SSR(Server Side Rendering)은

화면에 보여질 리소소를 서버로 요청하고, 서버로부터 받아온 리소스를 렌더링했다.

그러나 SPA는 렌더링의 역할을 서버에게 넘기지 않고 브라우저에서 처리하는 것이다.

정적 리소스를 최초에 한 번 다운로드하고, 이후에는 필요한 데이터만 전달받아 페이지를 갱신한다.

 

이로 인해 생기는 trade-off 격의 단점도 있다.

첫째로, 정적 리소스를 한번에 다운로드 하기 때문에 초기 구동속도가 느리다.

둘째로, SPA 구조 상 데이터 처리를 클라이언트에서 하는 경우가 많은데,

해당 로직들은 JavaScript를 통해 구현되므로 코드가 외부에 노출되는 보안적 문제가 있다.

셋째로, 검색엔진 최적화 (Search Engine Optimization, SEO)가 어렵다. 

검색 엔진이 크롤링할 때, JavaScript를 실행하지 않고 App이 로드되기 전의 빈 상태의 코드를 크롤링하기 때문이다.

이 때문에 인덱싱이 제대로 이루어지지 않는다.

전통적인 MPA (Multi Page Rendering)의 경우, 브라우저에서 JavaScript 코드가 동작하기 전에도 완성된 형태의 템플릿 (HTML에 데이터가 삽입된 상태)을 서버로부터 전달받는다.

이 때문에 검색 엔진이 페이지 크롤링하기에 매우 적합하다.

 

즉, SPA는 대체로 CSR(Client Side Rendering) 방식이다. 

이 말은 'SPA를 SSR 방식으로 렌더링 할 수 있다'는 것이다.

바로 Next.js를 사용하면 된다. SSR 기반의 Web APP을 컴포넌트 단위로 개발할 수 있게 해주는 프레임워크이다.

이렇게 하는 이유는, SSR (기존 MPA) 방식의 장점을 취하기 위함이다. 

 

2. 컴포넌트 단위로 개발 가능

우리가 함수화를 했을 때 얻을 수 있는 장점과 같다.

코드 가독성이 올라가며, 재사용성이 확대된다.

 

3. 데이터가 html에 자동 반영됨 ex) useState

리액트는 state에 저장시,

데이터가 변경될 때 관련 html을 자동으로 재렌더링해준다.

참 편리한 기능이다.

 

 

Next.js는 단순히 React랑 호환성이 좋아서 Node.js 대신 쓰는 줄 알았는데,

이런 이유가 있다는 걸 오늘이라도 알게 되어서 다행이다.

하마타면 망신을 두 번 당할 뻔했다.

하고 싶은 건 참 많지만 늘 부족한 것 같은 나.

열심히, 성실히, 우선순위를 두고,

얼른 말하는 감자를 탈출해서 취직을 해야겠다.

 

참조 : 주인장 오마카세 - 읽기 쉬운 블로그 엄선

• SPA(Single Page Application)란?
• SPA vs MPA와 SSR vs CSR 장단점 뜻정리