리덕스는 비교적 오랜기간 동안 리액트 생태계에서 상태관리에서 독보적인 존재였다. 심지어 리액트 + 리덕스를 하나의 프레임워크로 생각하는 개발자들도 있었다.(본인 포함 ㅋ) 하지만 Context API, useReducer, useState의 등장으로 리덕스 이외의 다른 상태 관리 라이브러리를 선택하는 경우가 많아지고 있다.아무래도 리덕스를 이용한다면 간단한 상태 관리의 코드도 복잡해지긴 한다. useStateuseState의 등장으로 여러 컴포넌트에 걸쳐 쉽게 동일한 인터페이스의 상태를 생성하고 관리할 수 있게 됐다.const useCounter = () => { const [counter, setCounter] = React.useState(0); function increase() { set..
REACT
리액트 애플리케이션에 자신이 익숙한 상태 관리 라이브러리를 설치하는 것이 익숙하지만, 왜 상태 관리가 필요한지와 어떻게 리액트에서 동작하는지 모르는 개발자 분들이 많다.(필자 포함) 이 글에서는 상태 관리 라이브러리의 필요성 부터 최근 많이 주목받고 있는 상태 관리 라이브러리가 어떻게 작동하는지 살펴보자. 상태 관리는 왜 필요한가웹 애플리케이션을 개발할 때의 상태는 어떠한 의미를 지닌 값이며 애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값을 의미한다.UI : 기본적으로 웹 애플리케이션에서 상호작용이 가능한 모든 요소의 현재 값URL : 브라우저에서 관리되고 있는 상태값form : 폼에 로딩 여부, 제출 여부, 접근 불가능 여부, 유효 상태 등 모두 상태로 관리된다.서버에서 가져온 값 : 클..
Next.js는 Vercel이라는 미국 스타트업에서 만든 풀스택 웹 애플리케이션을 구축하기 위한 리액트 기반 프레임워크다. Next.js가 웹 프론트에서 대세가 되기에 앞서 페이스북 팀에서 SSR을 위해 진행한 react-page 프로젝트가 있었다. 해당 프로젝트는 페이지를 서버 또는 클라이언트에서 리액트를 쉽게 사용할 수 있는 것을 목표로 만들어졌다. 물론 해당 프로젝트는 개발 중단되었지만, 구현된 방향성에 Next.js가 영감을 받았다. 특히 Next.js의 페이지 구조가 이를 닮았다. 만약 이 글을 읽고 있고 리액트 기반의 프로젝트에서 SSR을 고려하고 있다면 현재로서는 Next.js을 선택하는 것이 가장 합리적인 선택일 수 있다. Next.js 시작하기Next.js는 CRA와 비슷한 creact-..
기본적으로 리액트는 브라우저 JS 환경에서 렌더링할 수 있는 방법을 제공하는 프론트엔드 라이브러리이다. 하지만 리액트 애플리케이션을 서버에서 렌더링할 수 있는 API 또한 제공하고 있다. 해당 API는 당연히 Node.js와 같은 서버 환경에서만 실행할 수 있다. 현재 리액트 18이 릴리스되며 react-dom/server에 renderTopipeableStream이 추가됐고, 나머지는 대부분 지원 중단되는 등 큰 변화가 있다. 이 내용은 추후에 다루기로 하고 기존의 함수들에 대해 알아보자. renderToStringrenderToString은 인수로 넘겨받은 리액트 컴포넌트를 렌더링해 HTML 문자열로 반환하는 함수이다.SSR을 구현하는 데 가장 기초적인 API이다.import React, { useE..
정적 페이지정의사용자가 페이지에 접속 요청을 보낼때 마다 동일한 HTML 파일을 반환하는 페이지이며, 페이지에 렌더링되는 내용이 서버나 사용자 상태에 따라 바뀌지 않고 정적인 페이지이다. 특징빌드 시점에서 HTML, CSS, JS 파일들이 생성되며 서버에 저장되고, 서버는 해당 파일을 그대로 전송한다. 예시회사의 소개 페이지, 아티클, FAQ 등 자주 바뀌지 않는 콘텐츠를 다룸 동적 페이지정의사용자의 요청, 상태, DB 값 등에 따라 서버 또는 클라이언트에서 페이지가 동적으로 생성되는 페이지 특징SSR 또는 CSR 방식으로 HTML이 런타임에 생성되며, 사용자별 맞춤형 콘텐츠 제공이 가능하다.상용자별 맞춤형 콘텐츠 제공이 가능하다. 사용자의 로그인 상태, 지역 정보, 실시간 데이터를 통한 정보 제공 예..
과거 리액트 애플리케이션을 만들 때 CRA가 각광을 받았지만 요즘은 서버 사이트 렌더링을 지원하는 Next.js와 같은 프레임워크가 큰 인기를 끌고 있다. 서버 사이트 렌더링이란싱글 페이지 애플리케이션(SPA)SPA란 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 JS에 의존하는 방식을 의미한다. 최초에 첫 페이지에서 데이터를 모두 불러온 후 페이지 전환을 위한 모든 작업이 JS와 브라우저의 history.pushState와 history.replaceState로 이뤄진다. 이러한 작동 방식은 최초에 로딩해야 할 JS 리소스가 커지는 단점이 있지만 첫 로딩 이후 서버를 거쳐 필요한 리소스를 받아올 일이 적어져 사용자에게 훌륭한 UI/UX를 제공한다는 장점이 있다. 전통적인 방식의 애플리케이션 vs..
