react

IntroReact 18에서 도입된 동시성 렌더링(Concurrent Rendering)은 사용자 경험을 크게 개선했지만, 동시에 외부 상태 관리에서 예상치 못한 문제를 야기했습니다. 이 글에서는 동시성 렌더링이 무엇인지, 왜 기존의 useEffect 방식에 문제가 생겼는지, 그리고 useSyncExternalStore가 어떻게 이를 해결하는지 알아보겠습니다. 동시성 렌더링이란?React 18 이전의 렌더링은 동기적(Synchronous)이었습니다. 한 번 렌더링이 시작되면 중단 없이 완료될 때까지 진행되었죠.React 18의 동시성 렌더링은 렌더링 작업을 중단하고 재개할 수 있습니다. 이를 통해 다음과 같은 이점을 얻습니다:긴급한 업데이트(사용자 입력 등)를 우선 처리덜 중요한 업데이트는 백그라운드에서..

Intro오늘날 리액트 개발의 데이터 패칭에서 react-query를 많이 사용합니다.항상 도구의 사용에 앞서 도구가 어떤 역할을 수행하는지 자세히 이해해볼 필요가 있다고 생각합니다. 도구의 니즈를 구체화하는 것이죠.이번 시간에는 리액트에서 제공하는 API(useEffect, useState)를 이용해서 데이터 패칭을 해보면서 어떤 기능이 추가로 필요한지 고민해보겠습니다. 이번 글에서는 아래 코드를 바탕으로 설명을 진행하겠습니다. 완벽해보이시나요? 아래 코드에는 5개의 버그가 존재합니다.function Bookmarks({ category }) { const [data, setData] = useState([]) const [error, setError] = useState() useEffect((..

Intro다음은 실무에서 볼 수 있는 흔한 사례입니다. 어떤 문제가 있다고 생각하시나요?오늘은 이 코드 스닛핏의 문제를 정의하고 개선해보도록 하겠습니다.function SearchResult({ keyword }: { keyword: string }) { const [items, setItems] = useState() const DEBOUNCE_DELAY = 300; const REQUEST_OPTIONS = useMemo(() => ({ credentials: "include", cache: "no-store", }), []); const processResponse = useCallback((response: SearchResponse) => { return response..

IntroReact Hooks가 공개된 이후, 현대의 React 애플리케이션에서는 함수 컴포넌트가 사실상의 표준으로 자리 잡았습니다.이 변화는 자연스럽게 하나의 질문을 떠올리게 합니다.“Hooks의 등장은 class 문법과 객체지향 접근의 몰락을 의미하는가?” 이 질문은 자주 “React가 class를 버렸다”는 인상으로 단순화되곤 합니다.그러나 React의 선택이 JavaScript의 class 문법 자체를 부정한 결정이었는지,아니면 UI 컴포넌트라는 특정 문제 영역에서 더 비용 효율적인 모델을 채택한 것이었는지는 분리해서 살펴볼 필요가 있습니다.이 글에서는 먼저 React가 왜 Hooks를 도입했는지, 그 선택이 어떤 문제를 해결하기 위한 것이었는지를 살펴봅니다.이후, 그 결론을 애플리케이션 전반—특..

이 포스팅은 Kent C. Dodds의 글을 재구성한 글입니다.참고: https://www.epicreact.dev/how-react-uses-closures-to-avoid-bugsIntro본론에 앞서 위 영상을 시청해주시길 바랍니다. 이 글은 위 영상의 현상에 대한 이야기입니다!첨부된 영상을 보시면 Post1에서 좋아요를 누른뒤 Post2로 이동하면 Post2의 좋아요가 unlike되는 것을 확인할 수 있습니다. 왜 Post1의 ❤️를 클릭했는데 Post2의 ❤️가 사라졌을까요? 이 문제는 리액트 class Component에서 흔하게 발생하던 이슈였습니다. 이번 글에서는 class component에서 발생했던 구조적 문제를 바탕으로 함수 컴포넌트에서 어떤 접근으로 문제를 해결했는지 알아보겠습니..

Intro시작하기에 앞서 두 개의 코드 스니핏을 보여드리겠습니다. 어떤 차이가 있을까요?참고로 Counter 컴포넌트의 로직은 같습니다. 이번 글에서 다룰 내용은 아래 두 코드의 차이에 대한 설명입니다. 바로 맞추신 분들은 자신있게 뒤로가기를 누르셔도 됩니다.// 1️⃣ 삼항 연산자function Scoreboard() { const [isPlayerA, setIsPlayerA] = useState(true); return ( {isPlayerA ? ( ) : ( )} { setIsPlayerA(!isPlayerA); }}> Next player! );}// 2️⃣ && 연..

Intro리액트 공식 문서의 Escape Hatches메뉴에 5가지의 effect에 대한 문서가 있습니다. 이 개념을 위해 이렇게 많은 설명이 필요한걸까요? useEffect에서 effect는 무엇을 의미할까요? 제대로 사용하기 위한 첫 걸음은 정확한 멘탈 모델을 세우는 것입니다. 많은 문제가 여기에서 출발합니다. 그리고 이 문제들을 해결하는 쉬운 방법은 lint의 경고를 준수하는 것입니다.function Page({ url }) { const { items } = useContext(ShoppingCartContext); const numberOfItems = items.length; useEffect(() => { logVisit(url, numberOfItems); // 🔴 린트 ..

IntrouseState에서 useReducer로, 상태 공간을 줄이는 설계 React에서 폼 UI를 구현할 때 가장 흔한 접근은 여러 개의 useState를 조합하는 방식입니다.const [answer, setAnswer] = useState('');const [error, setError] = useState(null);const [status, setStatus] = useState('typing'); 이 세 가지 값만 보더라도 폼의 상태를 표현하는 데 필요한 정보는 충분해 보입니다.하지만 이 구조에는 한 가지 중요한 문제가 있습니다.논리적으로 불가능한 상태가 “가능”해진다UI 관점에서 다음 상태는 명백히 모순입니다.status === 'success' 인데 error !== nullstatus =..