본문 바로가기

Programing/React72

React-router-dom을 활용한 페이지 라우팅(디테일 페이지) 패키지 설치yarn add react-router-dom폴더 및 파일 생성하기📦 ├─ .env ✅├─ .eslintrc.cjs├─ .gitignore├─ README.md├─ index.html├─ package.json├─ public│  └─ vite.svg├─ src│  ├─ App.tsx│  ├─ api│  │  └─ api.ts ✅│  ├─ main.tsx│  ├─ pages│  │  ├─ SponsorDetail.tsx ✅│  │  └─ SponsorList.tsx ✅│  ├─ routes│  │  └─ routes.tsx ✅│  └─ vite-env.d.ts├─ tsconfig.app.json├─ tsconfig.json├─ tsconfig.node.json├─ vite.config.ts└.. Programing/React 2024. 6. 27.
React 에서 자주 쓰이는 if문 패턴 1. 컴포넌트 안에서 쓰는 if/else// 위 아래는 같은 것function App() { if ( true ) { return 참일 때 보여줄 HTML} else { return null; }}// 위 아래는 같은 것function App() { return 참일 때 보여줄 HTML} return null; }} else를 생략해도 같은 뜻임을 이해할 수 있다. 2. JSX 안에서 쓰는 삼항 연산자 (ternary operator)function Component() { return ( { 1 === 1 ? 참이면 보여줄 HTML : null } )} 중첩 사용도 가능하다.function Component() {.. Programing/React 2024. 6. 24.
TanStack Query 기본 사용법 TanStack Query란?TanStack Query(FKA React 쿼리)는 흔히 웹 애플리케이션을 위한 데이터 가져오기 라이브러리정도로 설명되지만 보다 기술적인 측면에서 보면 웹 애플리케이션에서 서버 상태를 쉽게 가져오기, 캐싱, 동기화 및 업데이트를 할 수 있게 도와주는 라이브러리이다. TanStack Query의 필요성리액트와 같은 라이브러리 등은 데이터를 전반적으로 가져 오거나 업데이트를 하는 방법에 대해서는 명확한 가이드를 제공해주지 않고 있다. 그래서 데이터를 가져오는 방법을 담은 메타 프레임워크를 만들 거나 자신만의 방법을 만들어서 사용하기도 한다. 기존 상태 관리 라이브러리는 클라이언트 상태 관리에는 적합하지만 서버 상태를 관리하기에는 적합하지 않다. 일반적으로 서버의 특성은 다음과 .. Programing/React 2024. 6. 24.
입력 필드 유효성 검사 상태 만들기 const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); const [error, setError] = useState(''); const [isButtonDisabled, setIsButtonDisabled] = useState(true);유효성 검사 함수 만들기const validateEmail = (email) => { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return emailRegex.test(email); };.. Programing/React 2024. 6. 22.
서버 통신으로 받은 사용자 인증 상태로 조건부 렌더링하기 들어가기에 앞서이 포스팅은 나의 삽질과 학습의 흐름을 기술한 것이니, 해결 방법이 궁금하신 독자가 계시다면 맨 마지막 목차로 이동하길 바란다. supabase의 getUser() 메서드로 유저의 인증 상태롤 서버로부터 받아옴.이를 Zustand를 활용하여 전역 상태로 만듦.이 전역 상태를 활용해서 헤더 컴포넌트에서 유저가 로그아웃 상태면 로그인, 회원가입 버튼이 보이게 하고, 로그인 상태이면 로그아웃 버튼만 보이게 조건부 렌더링을 하고자 함.나의 삽질 과정localStorage에 저장된 토큰을 불러와서 토큰이 있으면 인증된 사용자라고 간주. Programing/React 2024. 6. 19.

티스토리툴바