NextJS (3) 썸네일형 리스트형 [medium 번역글] Next.js 서버 액션을 사용한 1년: 배운 교훈 보호되어 있는 글입니다. [Next.js] Next.js 15의 새로운 Form 컴포넌트 가이드 기존 form 과의 주요 차이점 로딩 UI의 프리페칭 가능 ( 화면 미리 불러오기 )form 제출 시 부드럽게 페이지 전환 (깜빡임 없음) : 클라이언트 사이드 네비게이션preventDefault() 기본 수행쿼리 파라미터 를 name 속성에 맞춰 자동으로 붙여줌 기본 작성법import Form from 'next/form'function SearchForm() { return ( 검색 )} input name='query' 은 자동으로 쿼리 파라미터를 붙이는 기능입니다.url이 이렇게 됩니다 ......./search?query='인풋에서 쓴 내용' 컴포넌트의 동작은 액션 프로퍼티가 문자열인지 함수인지에 따라 달라집니다. 1. 액션이 문자열인 경우 은 .. [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 마운트됨!') // 최.. 이전 1 다음
