웹9 [Next.js] Data Fetching 정리 https://nextjs.org/docs/basic-features/data-fetching/overview Data Fetching: Overview | Next.js Next.js allows you to fetch data in multiple ways, with pre-rendering, server-side rendering or static-site generation, and incremental static regeneration. Learn how to manage your application data in Next.js. nextjs.org Next.js의 공식 문서를 토대로 Next.js의 pre-rendering 과정에서의 SSR(Server-side rendering)과 SSG.. 2022. 5. 27. [React] typescript component return type 타입스크립트에서 리액트 컴포넌트를 작성할 때 리턴 타입에 여러 종류가 있어서 오늘 이 내용을 가볍게 정리해보려 합니다. 크게 ReactNode, ReactElement, JSX.Element가 있습니다. 1. ReactNode render 메서드가 반환하는 값이 ReactNode라고 합니다. render 메서드는 클래스 컴포넌트에서 사용되는 함수도 ReactNode는 클래스 컴포넌트의 리턴 값으로 사용됩니다. 아래에서 살펴볼 ReactElement와 JSX.Element와 다른 점은 boolean, null, undefined를 값으로 가질 수 있다는 점입니다. 2. ReactElement jsx에서 컴포넌트를 작성하면 react.createElement를 사용하여 코드를 변환하는데, react.crea.. 2021. 12. 27. [React] 컴포넌트 props 타입 지정 typescript를 이용한 react에서 컴포넌트 props의 타입을 지정할 때 몇 가지 방법을 사용할 수 있습니다. 1. React.FC import React from "react"; interface MyComponentProps { name: string; } const MyComponent: React.FC = ({ name }) => { return {name}; }; export default MyComponent;첫 번째 방법은 React.FC를 사용하는 방법입니다. 사이에 타입을 삽입해주면 되는데요, 이 방법의 이점은 아래와 같습니다. props에 기본적으로 children이 들어있는 점 컴포넌트의 defaultProps, propTyps, contextTypes를 설정할 때 자.. 2021. 12. 27. [React] .js vs .jsx React 또는 React Native 프로젝트를 할 때 .js 확장자를 사용하는 경우도 있고 .jsx 확장자를 사용하는 경우도 있었습니다. 구현하는 방식에서 두 가지 방식에 크게 차이는 없다고 느꼈는데 과연 정말 차이가 없을까에 대한 의문점이 생겨서 이 포스트를 작성해보게 되었습니다. js vs jsx란 키워드를 구글링해보면 가장 먼저 나오는 게시물이 이 스택오버플로우 게시물입니다. https://stackoverflow.com/questions/46169472/reactjs-js-vs-jsx ReactJS - .JS vs .JSX There is something I find very confusing when working in React.js. There are plenty of examples .. 2021. 12. 27. 이전 1 2 3 다음
