동시성 기능(concurrency feature) 이전 버전까지의 동기 렌더링 방식에서는 컴포넌트 트리 내의 모든 컴포넌트가 렌더링되고 DOM에 반영되기까지 반응이 없는 UI를 경험했다. 리액트 18 버전에서 도입된 동시성 기능으로 렌더링 과정을 일시 중지했다가 다시 시작하거나 아예 중단할 수 있게 되었다. 이로 인해 대규모 렌더링 작업이 진행되고 있더라도 사용자 입력에 대해 UI가 즉각적으로 반응할 수 있게 된다. 각 컴포넌트에 렌더링 우선순위를 부여해 낮은 우선순위의 컴포넌트가 렌더링되는 동안에는 더 중요한 작업이 있는지 확인해 중간에 렌더링을 일시 중단하고 다른 작업을 수행한 뒤 재개할 수 있다. 자동 배칭(automatic batching) 배칭이란 여러 개의 상태 업데이트를 하나의 재렌더링으로 ..
라우팅 라우팅이란 사용자가 웹사이트의 여러 페이지로 이동하도록 해주는 프로세스를 말한다. 라우팅과 렌더링은 다르다. 특정 라우트에 대한 요청을 보낼 때마다 그 페이지를 렌더링하게 되지만, 모든 렌더링이 라우팅의 결과는 아니다. Client-side routing clinet-side routing은 자바스크립트에 의해서만 처리되는 라우팅이다. 웹 애플리케이션의 모든 내용을 한 페이지에서 동적으로 로드하고 표시하는 싱글 페이지 애플리케이션(SPA)은 클라이언트사이드 라우팅 방식으로 구현된다. 전체 페이지를 새롭게 렌더링하지 않기 때문에 부드러운 페이지 이동 경험을 제공할 수 있다. client-side routing의 장점과 단점 장점 렌더링되는 데이터의 양이 적어 컴포넌트 간의 라우팅이 빠르게 처리된다...
웹의 인증 방식 웹에서 인증을 구현하는 방법은 두가지가 있다. 서버사이드 세션 프론트엔드와 백엔드가 구분되지 않은 애플리케이션에서 자주 이용된다. 사용자가 로그인했을 때 서버에 고유 식별자를 저장하고 사용자에게도 보내준다. 이후 요청에서 그 식별자를 이용해서 인증한다. 백엔드와 프론트엔드가 긴밀하게 결합돼 있어야 한다. 클라이언트 관련 정보를 서버에 저장해야 하기 때문이다. 인증 토큰 사용자가 인증받은 뒤에는 허가 토큰을 생성하지만 서버에 저장은 하지 않고 사용자에게 보낸다. 백엔드만이 이 토큰의 유효성을 검사할 수 있다. 이후 요청에서 사용자가 토큰을 제시하면 백엔드에서 이 토큰의 유효성을 판단하는 방식이다. 이번에 구현해 볼 인증 방식은 토큰을 이용한 방식이다. 구현할 기능들은 다음과 같다. ・ 신규..
리액트 라우터는 클라이언트 사이드 렌더링으로 SPA를 구현하게 해 주는 도구다. 이전 포스팅에서 리액트 라우터의 아주 기본적인 사용법에 대해서 알아보았다. [React] React Router 사용해 SPA 만들기 1. SPA(Single Page Application) SPA는 사용자가 느끼기에는 여러 페이지가 존재하는 것 같지만 실제로는 하나의 페이지인 것을 말한다. 멀티 페이지 애플리케이션 기반으로는 페이지를 이동할 때마다 sulki.tistory.com 이번 포스팅에서는 리액트 라우터 v6.4부터 지원된 data api 사용법에 대해서 다뤄보겠다. data api를 이용하면 서버로부터 데이터를 가져오고 서버에 데이터를 보내는 작업을 처리할 수 있다. createBrowserRouter 리액트 라우..
리덕스 환경에서 비동기 작업을 처리해 보자. 지난번 리덕스 툴킷 실습에서 사용했던 카트 예제를 그대로 사용할 것이다. 기존에 로컬 데이터로 가지고 있었던 카트의 데이터를 서버로 옮기고서 카트에 아이템을 추가하거나 제거해서 업데이트할 때 서버로 데이터를 보내고 처음 페이지를 로딩할 때는 서버에서 데이터를 가져오도록 만들어 보자. 리덕스에서 비동기 작업을 처리하는 법 여기서 카트는 상태로 존재하고, 이 상태를 업데이트하는 함수들은 전부 리듀서 함수다. 리듀서 함수는 순수함수이기 때문에 그 내부에서 사이드이펙트를 처리할 수 없다. 즉, 카트 상태를 서버에서 가져오는 작업을 지금 가진 리듀서 함수 내에 넣어둘 수 없다. 그러면 서버와 통신하는 작업을 처리할 코드를 어디에 둬야 할까? 더 많은 방법이 있지만 일단..
리액트 성능 최적화의 필요성 리액트에서 컴포넌트는 state, props, context가 바뀔 때, 그리고 부모 컴포넌트가 재실행될 때 재실행되고 재평가된다. 컴포넌트가 재실행된다고 해서 반드시 실제 DOM이 변경되는 것은 아니다. virtual DOM상에서 변경 사항을 감지할 때만 실제 DOM에 변경 사항이 반영된다. 그렇지만 변경할 필요가 없는 컴포넌트의 재실행 및 재평가는 리액트의 성능에 영향을 줄 수 있다. 특히 애플리케이션의 상위에 존재하는 컴포넌트가 재실행·재평가된다면 그 하위의 모든 컴포넌트도 재실행될 것이기 때문에 애플리케이션의 규모가 클 경우에는 이것이 성능에 안 좋은 영향을 줄 수 있다. 그래서 리액트에서는 성능 최적화를 위해 React.memo와 useCallback을 사용할 수 있..
리덕스 툴킷 무엇일까? 리덕스 툴킷은 리덕스를 좀 더 효율적으로 사용할 수 있게 만들어주는, 말 그대로의 도구 모음이다. 리덕스 툴킷을 사용하면 매번 상태 복사를 하지 않고도 불변성을 지키며 상태 업데이트를 할 수 있고, 상태를 여러 조각으로 만들어서 필요한 부분만 업데이트하고 사용할 수 있다. 이렇게나 편리한 리덕스 툴킷, 사용하러 가보자고!🙌 configureStore 먼저, 리덕스 툴킷에서도 createStore처럼 스토어를 만들어주는 메서드가 있다. configureStore가 그것인데, configureStore는 createStore와 비슷하지만 다른 점도 있다. 다른 점 중 하나는 configureStore가 여러 상태 조각들을 하나로 모아준다는 것이다. createSlice 애플리케이션 내..
드디어 길고 길었던 음식 주문 앱 실습이 끝나고 리덕스로 들어왔다. 그래도 음식 주문 앱에서 머리 뽀개가며 컨텍스트 api와 useReducer를 배운 덕에 리덕스 공부를 하기가 훨씬 수월하게 느껴져서 보람차다!! 리덕스 무엇일까? 리덕스는 크로스 컴포넌트 앱 또는 앱 와이드 상태를 위한 상태 관리 라이브러리다. 즉, 단일 컴포넌트에서만 사용하는 상태가 아니라 여러 컴포넌트나 앱 전체에서 쓰이는 상태라면 리덕스에서 관리하는 것이 편할 수 있다. 리덕스는 FLUX 패턴을 모델로 한다. FLUX 패턴은 단방향 방식으로 View에서 Action을 호출하면 Dispatcher를 통해 Store에 데이터가 보관되고 다시 뷰로 전달되는 흐름을 따른다. 아래 그림은 props drilling 방식의 상태 관리와 FL..
