Next.js는 React를 기반으로 구축되고 서버에서 렌더링되는 React 애플리케이션용으로 설계된 인기 있는 오픈 소스 JavaScript 프레임워크이다. 간단하고 직관적인 개발자 경험을 제공하여 빠르고 확장 가능한 웹 애플리케이션을 쉽게 만들 수 있다. 이 글에서는 Next.js가 서버에서 렌더링되는 React 애플리케이션의 미래인 5가지 이유를 정리해보았다. 자동 코드 분할 (Automatic Code Splitting) Next.js는 요청 시 로드할 수 있는 작은 청크로 코드를 자동으로 분할하므로 로드 시간이 단축되고 사용자 경험이 향상된다. 서버 사이드 렌더링 (Server-Rendering) Next.js를 사용하면 서버에서 React 컴포넌트를 렌더링할 수 있으므로 웹 애플리케이션의 성능..

React 16.8 버전에서 Hook이 발표되고 난 후 React에서 컴포넌트를 선언하는 방법의 대세는 클래스 컴포넌트에서 함수 컴포넌트로 옮겨왔다. 많은 사람들이 익숙하고 이미 기존에 많은 코드들이 작성된 방법인 클래스 컴포넌트에서 함수 컴포넌트로 옮겨온 이유 중에는 함수 컴포넌트의 문법이 더 단순하고 교착상태로 인한 버그가 발생하지 않는다는 장점도 있지만, Custom Hook의 편리함과 유용성도 큰 비중을 차지하고 있다. 리액트는 UI를 구축하기 위한 라이브러리로 리액트가 가진 핵심적인 관심사는 UI와 UI를 변경시키는 로직이다. 이 중 UI는 실제 코드상에서는 JSX라는 형태로 표현되고, UI 변경 로직은 유저의 입력에 반응하거나 API를 호출하고 스크린의 변화에 반응하는 등 여러 동작들을 통해서..

Context API란? React에서 제공하는 내장 API로서 컴포넌트들에게 동일한 Context(맥락)을 전달하는 데 사용할 수 있다. 일반적으로 리액트에서 데이터를 전달하는 기본 원칙은 단방향성으로 부모 컴포넌트에서 자식 컴포넌트 방향으로만 데이터를 전달할 수 있다. 단방향성은 애플리케이션의 안전성을 높이고 흐름을 단순화하는데 유용하지만 때때로 너무 많은 단계를 거쳐서 자식 컴포넌트에 데이터를 전달해야 한다는 문제점을 야기하기도 한다. 예를 들어 5단계 아래에 위치한 자식 컴포넌트에게 데이터를 넘겨야 한다면, 중간에 4개의 컴포넌트는 해당 데이터를 사용하지 않을지라도 props를 계속해서 넘겨줘야 하는 문제가 발생하고, 형제 관계나 특정 범위 안에 있는 컴포넌트들에게 데이터를 넘기기 위해서는 더 복..

렌더링 (Rendering) 렌더링이란 화면에 특정한 요소를 그려내는 것을 의미한다. 사실 이 렌더링 과정을 잘 처리해주는 것이 우리가 Vanila JavaScript를 사용하지 않고 React 같은 UI 라이브러리 또는 프레임워크를 사용하는 이유다. 브라우저에서 렌더링이란 결국 DOM요소를 계산하고 그려내는 것을 의미한다. HTML과 CSS를 통해서 만들어지고 계산된 DOM과 CSSOM은 결합되고, 위치를 계산하고, 최종적으로 브라우저에 그려진다. 그리고 개발자는 브라우저에서 제공하는 DOM API를 JavaScript를 통해 호출하면서 브라우저에 그려진 화면을 변화시킨다. 하지만 Vanila JavaScript를 이용해서 DOM에 직접 접근하고 수정하는 것(명령형), 그리고 이를 최적화하는 것은 애플..

브라우저에서 화면을 그리기 위해 일어나는 일련의 과정들은 변화가 발생했을 때 일어난다. 그런데 자바스크립트가 발전해 DOM을 조작하면서 변화가 자주 일어나게 되었다. 이 변화라는 것은 사용자 입장에서는 풍부한 인터렉션이다. 언어와 하드웨어의 성능이 닿는 한 계속해서 증가할 것만 같으며, 이런 렌더링 작업이 일어나는 동안 자바스크립트가 브라우저의 메인 스레드를 먹어버리면 끊김 현상이 일어나게 된다. 그래서 중요하게 생각되는 숫자가 바로 초당 프레임(Frames Per Second)이다. 화면이 변경되는 프레임의 횟수만 지켜주면 되기 때문이다. 이걸 가능하도록 하기 위해 자바스크립트의 동작을 작은 덩어리로 나누어 줘야 하는데, window.requestAnimationFrame()을 사용하면 프레임 수를 보..

CRA(create-react-app)으로 리액트 프로젝트 생성하기 리액트 프로젝트를 생성하는 방법에는 여러 가지가 있지만, 현재로서 가장 쉽고 보편적인 방법인 CRA(create-react-app)를 사용해서 생성해보려 한다. CRA 프로젝트를 생성하기 위해 npx를 사용할 것이다. 여기서 npx는 자바스크립트 패키지 관리 모듈인 npm의 5.2.0 버전부터 새로 추가된 도구로 npm을 좀 더 편하게 사용할 수 있게 해 준다. Node.js를 설치했다면 기본적으로 npm도 같이 설치되므로 Node.js를 처음 설치했다면 바로 사용할 수 있다. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.or..

React Query React Query는 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 서버 상태 관리 라이브러리다. 기존에 Redux, Recoil과 같은 다양하고 훌륭한 상태 관리 라이브러리들이 있긴 하지만, 클라이언트 쪽의 데이터들을 관리하기에 적합할 순 있어도 서버 쪽의 데이터들을 관리하기에는 적합하지 않은 점들이 있어서 등장하게 되었다. QueryClientProvider 리액트 쿼리를 사용하기 위해 최상위 컴포넌트를 QueryClientProvider로 감싸준다. 쿼리 인스턴스를 생성 후 client={queryClient} 작성해준다. import { QueryClient, QueryClientProvider } from "react-query"..