React Router 와 TanStack Router 비교해보기

이직을 하고 적응 + 새로운 루틴을 만드느라 글을 오랜만에 쓴다.. (반성)이전엔 Vite로 적용되는 React 기본 폴더 구조를 썼고 React Router의 코드 기반 라우팅을 사용해 봤던 경험이 많았다. 그러다 최근에 Next를 프로젝트에서 파일 시스템 구조에 맞춰서 자동으로 라우팅을 연결해 주는 File-based Routing을 사용해 본 경험으로 인해 편리함을 맛보아서 그런지 React에서도 비슷하게 사용하고 싶었다. 그러다 TanStack Router를 알게 되었다.TanStack Router를 적용해보면서 기존에 써봤던 React router와의 차이를 비교해보려 한다.단기간 사용으로 느낀 점을 다루다 보니 실제 TanStack의 잠재성보다 얄팍할 수 있다는 점,, 말씀드린다.React R..

작년에 React deep dive 스터디를 했었다. 당시 context API를 Props drilling을 해결하기 위한 의존성 주입 도구로 활용할 수 있다는 걸 배웠다. 하지만 실무에서 props drilling이 깊어질수록 복잡해졌고 무작정 전역상태로 넘겨버리는 방식을 택하게 되었다. 그러다 최근 토스 FF 레포지토리에서 논의되는 것들을 보며 다시금 Context API의 본질을 고민하게 되었고 이렇게 글을 쓰게 되었다. Props DrillingReact는 부모 ⇒ 자식 컴포넌트로 이루어진 트리 구조를 가지고 있다.부모가 가진 데이터를 자식에서 사용하려면 props를 통해 전달해야 한다. 위와 같은 구조에서 A ⇒ D 까지 데이터를 전달하려면 중간에 있는 모든 컴포..

최근 실무에서 상태 관리를 위해 Zustand docs와 상태 관리와 관련한 책을 들여다보다 문득 상태 관리를 하려면 상태에 대해서 알아야되는 것 아닌지, 이미 상태에 대해 잘 안다고 단언할 수 있는가하고 스스로 의심하게 되었다. 제일 기본적인 useState도 제대로 알고 쓰는지 확신할 수 없었다. 리액트 공식 문서와 리액트 딥다이브, 리액트 훅을 활용한 마이크로 상태관리 등의 책을 참고하여 상태를 알아보고자 한다. 참고로 원문을 직접 번역해서 적었기 때문에 부족한 부분이 있을 수 있고 그렇기에 react-ko.dev 내용과 차이가 있을 수 있다. State 상태 컴포넌트는 상호작용의 결과에 따라 화면에 표시되는 내용을 변경해야하는 경우가 잦다. form에 입력할 때, input field를 업데이트해..

리액트 스터디 중 "가상DOM과 리액트 파이버" 주제가 나왔다. 발표를 맡게된 리액트 렌더링 부분을 준비하고, 발표 당일 스터디원들과 얘기하며 조금씩 윤곽이 잡히기 시작했다. 하지만 여전히 어려운 건 매한가지... 그러다가 좋은 글을 발견했는데 포스팅 일자가 리액트 15,16 기준이라 렌더가 동기식으로 진행된다고 되어있어서 🤔 제대로 스터디 내용을 복기할 겸, 그리고 파이버와 좀 친해질 겸 포스팅 주제로 선정하게 되었다. 조금 의문이었던 것은 재조정 과정은 똑같고, 여전히 유효할 것 같은데 리뉴얼된 React 사이트에는 파이버와 관련된 내용이 전부 생략되어있다. 왜일까????? 그래서 더 어렵게 느껴졌던 것 같다. 더이상 관련이 없는 내용인지? 레거시한 부분인 건지에 대한 고민. 리액트 파이버 아키텍처 ..

Introduction 나는 null이 아니라 any 형식이 포함된다고 Error가 떴다. React에서의 event를 제대로 이해하지 못한 탓인지 tsx를 화나게 했다. 나처럼 js에서의 Event는 익숙한데, React + TypeScript에서의 Event 타입을 어떻게 다루어야 할 지 이해하지 못하는 분들을 위해 글을 쓴다! React, TypeScript에서의 Event Type JavaScript에서 자주 쓴 `addEventListener( )`, `on____` 예시로 `onChange` change event는 주로 input element의 값이 수정되었을 때 발생하도록쓰인다. // Syntax addEventListener("change", (event) => {}); onchange..