Basic Features > Pages 2 [공식 문서로 공부하는 Next.js] 기본적인 특징 1 (next.js 9.3 version) : Pages - 2 Static Generation (추천) 페이지를 정적으로 생성하는 경우 HTML은 빌드 시 생성됩니다. 즉, 다음 빌드를 실행할 때 페이지 HTML이 생성된다는 말입니다. 이 경우 HTML은 각 요청에서 재사용되고, CDN에서 캐시 할 수 있습니다. Static Generation (데이터가 없는 경우) 기본적으로 Next.js는 데이터를 가져오지 않고, 정적 생성을 사용하여 페이지를 미리 렌더링 합니다. 이 경우 데이터가 없으므로 Next.js는 빌드 시 페이지당 하나의 HTML 파일을 생성합니다. function About() { return About } export default About Static Generati.. 2022. 1. 6. Basic Features > Pages 1 [공식 문서로 공부하는 Next.js] 기본적인 특징 1 (next.js 9.3 version) : Pages - 1 Next.js에서 page는 페이지 디렉토리의 .js, .jsx, .ts 또는 .tsx 파일에서 내보낸 React Component 입니다. 각 페이지는 파일 이름을 기반으로 경로와 연결됩니다. 예시) pages/about.js 가 React component 로 export 되었다며, /about로 접근이 가능합니다. Pages with Dynamic Routes Next.js는 동적 경로를 지원합니다. 'pages/posts/[id].js'라고 파일을 만들었다면 'pages/posts/1','pages/posts/2' 등으로 접근할 수 있습니다. Pre-rendering 기본적으로 Next.js는 모든 페이지가 pre-re.. 2022. 1. 6. React | State가 무엇일까? (State: A Component's Memory) State: A Component's Memory 컴포넌트는 상호 작용의 결과로 화면에 표시되는 내용을 변경해야 하는 경우가 많습니다. 예를 들면 폼에 입력하면 입력 필드가 업데이트되고, "다음"을 클릭하면 표시되는 이미지가 변경되고, "구매"를 클릭하면 제품을 장바구니에 넣어야 합니다. 컴포넌트는 이런 현재 입력 값, 현재 이미지, 장바구니 등을 "기억"해야 합니다. React에서는 이러한 종류의 컴포넌트별 메모리를 state라고 합니다. When a regular variable isn’t enough handleClick() 이벤트 핸들러가 지역 변수인 인덱스를 업데이트하고 있습니다. 그러나 다음 두 가지 사항으로 인해 지역변수가 업데이트된 사항이 표시되지 않습니다. 지역 변수는 렌더링 간에 유지되.. 2021. 12. 3. React | 이벤트에 응답하기 (Responding to Events) React를 사용하면 JSX에 이벤트 핸들러를 추가할 수 있습니다. 이벤트 핸들러는 클릭, 호버링, 양식 입력에 초점 맞추기 등과 같은 사용자 액션에 대한 반응으로 트리거되는 고유한 기능입니다. 이벤트 핸들러 추가하기 (Adding event handlers) 이벤트 핸들러를 추가하기 위해서는 먼저 함수를 정의한 다음 JSX태그에 Prop로 전달합니다. 버튼을 만듭니다. Button 컴포넌트 안에 handleClick 함수를 선언합니다. handleClick 함수에는 alert로 메시지를 보여줍니다. button에 onClick={handleClick}을 추가합니다. handleClick함수는 button에 prop로 전달됩니다. export default function Button() { functi.. 2021. 12. 2. 이전 1 2 3 4 5 6 7 8 다음
