React (34) 썸네일형 리스트형 [Next.js] layout.js 와 templete.js 의 차이점 1. Layout.js공유 UI를 여러 페이지에서 재사용페이지 전환시 리렌더링되지 않음한번 마운트된 후 계속 유지되는 특성상태가 유지됨헤더, 네비게이션 바와 같은 지속적으로 유지되어야 하는 UI 요소에 사용리렌더링되지 않아 성능상 이점2. Templete.js매 페이지 전환시 새로운 인스턴스 생성상태가 유지되지 않음 (not preserved)매번 새로 마운트됨페이지 뷰 추적 , 페이지 전환 애니메이션, 입력 값 초기화가 필요한 경우에 사용컴포넌트 격리가 필요할 때도 사용템플릿은 매번 새로 마운트되어 메모리 관리 필요 // Layout.tsx'use client'export default function Layout({ children }) { console.log('Layout 마운트됨!') // 최.. [RTL] 디버깅 팁 1. screen.debug() 사용 2. logRoles 메서드 사용import { logRoles } from '@testing-library/react' const { container } = render() logRoles(container) html 태그가 테스트 로그창에 나온다 3. 서버 호출이나 async 을 사용하면서 getBy* 로 테스트를 해서 원하는 요소를 못찾았다면await findBy* 로 수정 4. userEvent 메서드를 사용하면 await 사용하기 test('예시 테스트', async () => { const user = userEvent.setup() render( ) // 생략 const chkBox = await scre.. [React] 리액트 라이브러리 추천 목록(2024 기준) 기존 Ykss 님이 번역하신 글을 표로 정리한 글입니다 실 사용 경험과는 상관 없이 지극히 개인적 취향을 목적으로 정리하였으니,맨 아래 원문을 참고하시길 바랍니다. 구분이름 및 링크비고build toolVite 패키지 매니저pnpm성능적으로 npm 보다 향상된 pnpm기본적이고 가장 널리 사용되는 건 -> npm모노레포가 필요한 경우 -> Turborepo상태관리ZustandApi context 는 최적화시 개발자가 직접 최적화 해야하는번거로움이 있어 Zustand + tanstack Query 로 풀어낸다데이터 페칭 TanStack QueryREST API 또는 GraphQL API라우팅React Router타입스크립트면 TanStack RouterCSSTailwind CSS https://runebo.. [Next.js] Server Actions 시 놓치면 안되는 revalidatePath, revalidateTag ( 데이터 캐시 관리) Server Actions으로 진행하던 사이드 프로젝트에서 잘 작동하던 게시글 등록이,빌드 후에는 새 게시글이 리스트에서 반영이 되지 않는 현상이 일어났습니다. 구글링 후, 해결책을 찾을 수 있었는데 캐시 무효화 로직이 ( revalidatePath )빠져 있었습니다. 'use server' 를 명시한 서버 컴포넌트에서만 사용이 가능한 revalidatePath에 대해 정리해 봅니다. 1. revalidatePath사용 목적특정 경로의 캐시된 데이터를 무효화하고 새로운 데이터로 갱신할 때 사용됩니다.기본 문법revalidatePath(path, type?) - path : 데이터 캐시를 재검증할 url 경로- type : 'page' (디폴트 값), 'layout' 여기서 type은 두가지가 있는데 p.. [React] form submit과 관련된 useFormStatus 훅 useFormStatus는 마지막 폼 제출의 상태 정보를 제공하는 Hook입니다form 이 pending 상태일 때 다른 이벤트를 주고 싶을 때 사용하는 용도로 사용됩니다.(예 : submit 버튼의 텍스트를 submitting... 으로 바꾼다던지 ) const { pending, data, method, action } = useFormStatus(); tanstack query 의 useQuery 에서 보던 형태이다. pending: 불리언 값입니다. true라면 상위 이 아직 제출 중이라는 것을 의미합니다. 그렇지 않으면 false입니다. data: FormData 인터페이스를 구현한 객체로, 상위 이 제출하는 데이터를 포함합니다. 활성화된 제출이 없거나 상위에 이 없는 경우에는 null입니다... [Next.js] react 와 next의 form submit 차이( Server Actions 시 ) 기존 react 에서 form 제출 시에는 export default function Signup() { function handleSubmit(e) { e.preventDefault() const formData = new FormData(e.target) console.log('formData', formData) const acquisitionChoices = formData.getAll('acquisition') const data = Object.fromEntries(formData.entries()) data.acquisition = acquisitionChoices } return ( Email .. [Next.js] react 와는 다른 이미지 import 방법 설명과 Image 컴포넌트 활용하기 Next.js에서 import로 이미지를 가져올 때, 해당 이미지는 객체 형태로 임포트됩니다. 이 객체는 다음과 같은 속성들을 포함합니다 src: 실제 이미지 경로height: 이미지 높이width: 이미지 너비기타 메타데이터그러므로 src={logo.src} 로 접근해야 하며,react 에서 사용했던 것 처럼 src={logo} 이런 식으로 작성할 경우 이미지 바인딩이 불가능하게 됩니다. import Link from "next/link";import logo from "@/assets/logo.png";export default function MainHeader() { return ( );} 더 나은 방법으로는 Image 컴포넌트를 사용하는 .. [Next.js] next 기초 1. App 라우팅 동적 라우팅 폴더명 기입방식 [folder]필수 파라미터입니다하나의 세그먼트만 매칭됩니다블로그 포스트, 제품 상세 페이지에 적합합니다[ ...folder ]최소 하나의 세그먼트가 필요합니다여러 세그먼트를 포함할 수 있습니다계층적 카테고리 구조에 적합합니다/shop/clothes (O) /shop/clothes/shirts (O)[ [ ...folder ] ]선택적 모든 것을 포함하는 라우트선택적 필터나 검색 파라미터가 있는 페이지에 적합합니다 이렇게 대괄호 표기를 하면 /blog/post-1 /blog/post-2 /blog/post-3 이렇게 동적으로 라우팅이 가능해진다.그리고 [folder] 안의 page.js 에서export default function BlogPo.. 이전 1 2 3 4 5 다음
