라우터 2

TanStack Router v7로 타입 안전한 라우팅 구현하기

최근에 루키톤을 하고있다! 같이 하는 제롬이 리액트 라우터 돔을 많이 싫어해서... TanStack Router를 도입했다.React Router를 사용하다가 TanStack Router를 사용해보면서 겪은 경험과 장점들을 정리해봤다. TanStack Router이란? 🤔TanStack Router는 React Router v7이라고도 불린다.파일 시스템 기반 라우팅과 타입 안전성이 특징인 라우터 라이브러리이다. Next의 파일 기반 라우터를 좋아했던 사람들이라면 이것 역시 좋아할 듯주요 특징1. 파일 시스템 기반 라우팅2. 완벽한 타입스크립트 지원3. 자동 코드 분할4. 성능 최적화시작하기 👶먼저 필요한 패키지를 설치해준다.pnpm add @tanstack/react-router 설치 후에 vite..

React 2024.11.17

[Raact-Native] 조건부 렌더링, 리액트처럼 라우터 기능 구현하기

react native로 열심히 개발을 하던 도중에 난관에 부딪혔ㄷ ㅏ 리액트에서는 페이지 라우터가 있어서 렌더링 할 때 조건부로 렌더링이 가능했는데 리액트 네이티브에서는 스택으로 쌓이는 형태라 스택을 다시 나오는 방법을 모르겠어서 (내가 못 찾은 걸 수도...) 조건부 렌더링이 쉽지 않았다! 내가 원하는 건 토스 처럼 매끄러운 화면 전환 + 하단 네비게이션 바가 고정된 채 컴포넌트들만 렌더링 되는 거! 하지만 스택으로는 새로운 페이지가 자꾸 옆에서 튀어나오고... 네비게이션 바를 가리고... 그런 상황이 발생했다 해결 방법 -> home네비게이션에서는 home.js만 두고 그 안에서 렌더링에 조건을 달아 조건부 렌더링을 하자! 조건부 렌더링 하는 방법 1. retuen 안에서 삼항 연산자 쓰기 retu..

React-Native 2024.04.11
728x90