리덕스는 비교적 오랜기간 동안 리액트 생태계에서 상태관리에서 독보적인 존재였다. 심지어 리액트 + 리덕스를 하나의 프레임워크로 생각하는 개발자들도 있었다.(본인 포함 ㅋ) 하지만 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..
과거 리액트 애플리케이션을 만들 때 CRA가 각광을 받았지만 요즘은 서버 사이트 렌더링을 지원하는 Next.js와 같은 프레임워크가 큰 인기를 끌고 있다. 서버 사이트 렌더링이란싱글 페이지 애플리케이션(SPA)SPA란 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 JS에 의존하는 방식을 의미한다. 최초에 첫 페이지에서 데이터를 모두 불러온 후 페이지 전환을 위한 모든 작업이 JS와 브라우저의 history.pushState와 history.replaceState로 이뤄진다. 이러한 작동 방식은 최초에 로딩해야 할 JS 리소스가 커지는 단점이 있지만 첫 로딩 이후 서버를 거쳐 필요한 리소스를 받아올 일이 적어져 사용자에게 훌륭한 UI/UX를 제공한다는 장점이 있다. 전통적인 방식의 애플리케이션 vs..
중복 코드를 피해야 한다는 것은 중요한 말이다. 반복되는 코드의 존재만으로도 비효율이며 유지보수도 어려워진다. React에서 재사용할 수 있는 로직을 관리할 수 있는 방법은 두 가지가 있다.사용자 정의 훅(Custom Hook)고차 컴포넌트(High Order Component)사용자 정의 훅(Custom Hook)서로 다른 컴포넌트 내부에서 같은 로직을 공유하고자 할 때 주로 사용되는 것이 사용자 정의 훅이다. 이는 Hook을 기반으로 필요한 훅을 만드는 기법이며, 오직 React에서만 사용할 수 있는 방식이다. React 훅이 use로 시작하는 네이밍 규칙이 있는 것처럼 사용자 정의 훅 또한 use로 시작하는 이름을 갖는 것이 규칙이다. 아래는 HTTP 요청을 하는 fetch를 기반으로 한 사용자 정..
