React10 React 18 useSyncExternalStore를 이용하여 전역 상태 구현하기 ex) recoil, zustand, jotai 들어가며 React 18에 새로 나온 useSyncExternalStore를 이용하여 recoil jotai, zustand 같은 전역 상태 라이브러리를 간단하게 만들어보는 작업을 하려고 한다. 먼저 useSyncExternalStore에 대해서 알아보자 useSyncExternalStore는 저장소(store)에 대한 업데이트를 강제 동기화하여 외부 저장소가 concurrent reading(동시 읽기)를 지원할 수 있도록 하는 hook이다. 쉽게 말해서, useSyncExternalStore hook은 react가 아닌 외부 저장소(ex, 바닐라 자바스크립트) 값을 읽어드리고 구독할 때 사용된다. 외부 저장소 값의 변화를 추적하고, 리액트의 동시성 상태 변화에 대응할 수 있다. useSyncExter.. 2023. 6. 3. Next.js + tanstack-query(react-query)로 server-side-rendering(ssr) 구현하기 들어가며 Next.js와 tanstack-query(react-query)를 이용해서 ssr을 구현해보려고 한다. Next.js를 이용하여 데이터를 서버에서 fetch 해서 렌더링을 했을 경우에 layout shift 현상이 없어지고, 초기 로드했을 때 데이터가 바로 보이기 때문에 ux적으로 개선이 된다. layout shift란 layout shift는 데이터가 뒤늦게 로드가 되어 빈화면이 발생하고, 화면에서 ui가 밀리는 현상을 의미한다. layout shift는 ui/ux 경험을 해치고 사용자가 페이지 콘텐츠에서 갑작스러운 이동을 경험하게 된다. 간단한 예시로는 화면에서 아무것도 보이지 않고, 데이터가 로드가 된 이후에 갑자기 데이터가 보이는 현상이 layout shift이다. 이러한 layout .. 2023. 6. 2. React 18 useDeferredValue와 useTransition 이란? 들어가며 React 18에서 concurrent rendering을 위해 새로 나온 useDeferredValue와 useTransition이 무엇인지 알아보자. 서비스에서 무거운 계산을 하는 로직이 실행되면 메인 스레드가 거기서 블록되기 때문에 다음 작업을 처리하지 못하게 된다. 극단적으로 매우 무거운 작업을 하게 될 때 다음 입력을 받지 못할 정도로 프레임이 저하되는 현상이 발생한다. 이럴 경우 유저와 상호작용이 불가능해지는 상태가 발생하고, 유저에게 좋은 경험을 제공하지 못하게 된다. 이 문제를 근본적으로 해결하기 위해서 React 팀에서는 사용자의 상호작용이 있으면 무거운 작업은 메인 스레드가 놀고 있을 때 처리하고, 유저 입력이 들어오면 다시 유저와의 상호작용에 집중하는 것이다. 즉 상태 변화의.. 2023. 5. 28. React Testing Library를 이용한 Custom Hooks 테스팅 이번에는 React-Testing-Library를 이용해서 Custom Hooks를 테스팅해보겠다. Custom Hooks는 일반적인 함수처럼 테스트 코드를 작성할 수 없다. 그 이유는 Custom Hooks는 React에서 제공하는 Hooks(useState, useEffect...)를 이용한 함수이기 때문이다. 대표적인 Custom Hooks인 useToggle hooks 예시를 보면 다음과 같다. import { useCallback, useState } from "react"; export default function useToggle(initialState = false) { const [state, setState] = useState(initialState); const onToggle =.. 2022. 3. 28. React Testing Library(RTL) 사용법 React Testing Library는 Facebook에서 공식적으로 사용을 권장하는 리액트 테스트 도구이다. 이 라이브러리는 사용자가 컴포넌트를 사용하는 것처럼 테스트를 작성할 수 있도록 설계되어있다. React Testing Library는 기본적으로 cra로 react를 설치하면 같이 설치가 된다. 그럼 한번 사용법을 알아보자 초기 세팅 먼저, 새로운 React 프로젝트를 만들어보자. 이 포스팅에서는 타입스크립트를 이용했다. $ npx create-react-app react-testing --template typescript or $ yarn create react-app react-testing --template typescript 설치가 완료 되었으면 App.test.tsx 파일을 지워주.. 2022. 3. 28. [컴포넌트 재활용하기] - Button 오늘은 재활용 가능한 컴포넌트 중에 가장 많이 사용되는 Button을 만들어 보자. 개발 환경 - react 17.0.2 - typescript 4.4.2 - styled-component 5.3.3 1. styled-components를 적용한 기본적인 버튼 컴포넌트 생성 src/components/Button.tsx import React, { ReactElement } from "react"; import styled from "styled-components"; function Button(): ReactElement { return Button; } const ButtonStyled = styled.button``; export default Button; 우리는 여기서 고민을 해야 한다. 버튼.. 2022. 2. 19. 나는 리액트를 어떻게 설계할 것인가? 들어가며 나는 작년부터 지금까지 리액트를 이용해서 여러 프로젝트들을 했다. 리액트를 배운 지 얼마 안 됐을 때는 책에서 배운 대로, 인강에서 배운 대로만 따라 하느라 큰 고민을 하지 않았었다. 그러나 어느 정도 경험이 생기고, 여러 팀 프로젝트를 참여하면서 팀원들과 의견을 나누다 보니, 프로젝트를 시작할 때 어떤 리액트 패턴을 사용할지, 폴더구조는 어떻게 가져갈지에 대한 고민을 하게 되었다. 이런 고민을 하는 과정에서 배운 내용들을 토대로 포스팅을 작성해보려고 한다. ❓ 리액트 컴포넌트 패턴은 뭐가 있고 어떤걸 사용할까 리액트는 정말 자유로운 라이브러리 이기 때문에, 다양한 패턴들이 존재한다. 그중에서 어떤 방식을 사용할지는 개발자가 정하는 것이기 때문에, 우리는 새로운 프로젝트를 시작할 때 이런 고민을.. 2022. 2. 14. Recoil에서 Redux로 마이그레이션 하게 된 이유 배경 현재 나는 IT 연합동아리 Yapp에서 활동을 하고 있다. 우리 팀은 북마크를 좀 더 쉽고 편리하게 관리하기 위한 서비스를 기획하게 되었는데, 첫 기획 당시에는 단순히 북마크 관리 페이지(검색, 휴지통), 로그인, 회원가입 페이지 이게 전부였다. 그래서 기술 스택을 정할 당시에 전역 상태가 그렇게 많을 거 같지 않아서, 러닝 커브가 매우 적고 상태를 react의 useState처럼 쉽게 관리할 수 있는 recoil을 하기로 정했었다. 동아리에서 진행하는 1차 기획캠프를 하게 되었는데, 기획 캠프는 각 팀별로 기획 내용을 발표한 후에 현업 기획자 분들에게 피드백을 받을 수 있는 시간이었다. 우리가 기획한 북마크 관리 서비스에 대해서도 피드백을 많이 받았는데, 다른 북마크 관리 서비스와의 차별점이 없다.. 2022. 1. 16. 리액트 라이프 사이클 - useEffect 라이프 사이클(Lifecycle) 이란? 라이프 사이클은 말 그대로 생명 주기이다. 그렇다면 리액트에서의 라이프 사이클은 무엇일까? 리액트에서의 라이프 사이클은 바로 컴포넌트의 수명 주기를 말한다. 컴포넌트의 수명 주기는 총 3단계가 있다. 1. 컴포넌트가 생성될 때 (마운트) 2. 컴포넌트가 업데이트 될 때 (업데이트) 3. 컴포넌트가 제거 될 때 (언마운트) 이 3단계의 수명 주기에 관해서 알아보자 컴포넌트가 생성될 때 (마운트) 다음과 같이 useEffect hooks를 이용하여 안에 코드를 넣어주면 컴포넌트가 생성(마운트)될 때 해당 코드가 실행이 된다. useEffect(() => { console.log("첫 랜더링") }, []) 컴포넌트가 업데이트될 때 (업데이트) 컴포넌트가 업데이트될 때.. 2022. 1. 8. React Router v6 업데이트 정리 velopert님의 영상을 토대로 정리한 블로그 글입니다. 동영상으로 보실분들은 velopert님의 유튜브 영상을 시청해주세요! React Router v6 정식 릴리즈 React Router v6가 정식으로 릴리즈 되었다. 공식문서 그 동안 사용했던 React Router의 문법이 조금 바뀌었는데 v5문법에 많이 익숙해서 그런지 v6문법과 v5문법이 많이 헷갈린다. ㅎㅎ.. 그럼 어떤점이 바뀌었는지 한번 보자 Switch가 사라지고, Routes 등장 Routes는 기존 Switch처럼 경로의 순서를 기준으로 선택하는 것이 아닌, 가장 일치하는 라우트를 기반으로 선택하게 된다. Routes로 기존 Switch의 기능을 대체 가능 기존 코드 v6 코드 useHistory가 사라지고, useNavigate.. 2021. 12. 29. 이전 1 다음
