Nextjs 개요
1 create-next-app
$ npx create-next-app@latest --ts nextapp1
$ npm run dev2 dev plugin & tools
$ npm install --save-dev \
prettier \
eslint \
typescript-eslint \
@typescript-eslint/eslint-plugin \
@typescript-eslint/parser \
eslint-config-prettier \
eslint-plugin-prettier \
eslint-plugin-react \
eslint-plugin-react-hooks \
eslint-plugin-import3.Component
- 컴포넌트 함수에서는 단 하나의 element만 반환해야 함으로 아래와 같이 으로 묶어 주거나 <></>로 묶어줘여 함.
- 컴포넌트는 반드시 시작~종료 tag를 쓰거나 self-closing tag를 써야 함. 로만 하면 에러발생
function App() {
return (
<main>
<Post />
<Post />
<Post />
</main>
)
}
export default App-
보호된 파일명
- page.js: 신규 page 생성
- layout.js: 형제 및 중첩 페이지를 감싸는 신규 레이아웃 생성
- not-found.js: 'Not found' 오류에 대한 폴백 페이지
- error.js: 기타 오류에 대한 폴백 페이지
- loading.js: 데이타를 가져오는 동안 표시되는 페이지
- route.js: API 경로 생성
-
useActionState: submit버튼 클릭시 상태에 따라 button 명칭을 변경한다던가 입력 parameter의 유효성 검증에 사용
(주의) useFormState(from react-dom) -> useActionState로 변경됨(from react). -
Page rendering 예 (w/typescript)
import React from 'react';
type GreetingsProps = {
name: string;
};
const Greetings: React.FC<GreetingsProps> = ({ name }) => (
<div>Hello, {name}</div>
);
export default Greetings;4. Storybook
- storybook 설치 및 실행
npx sb@latest init
npm run storybook5. Aggressive Caching
- Request Memorization: 단일 요청을 처리할때 데이터 소스에 대한 중복 요청을 피하기 위함.
- Data Cache: 데이터가 변경되지 않는한 요청 자체를 완전히 피함. 사용자가 수동으로 재검증할때까지 유지함.
- Full Route Cache: 전체 page, 전체 HTML 관리
- Router Cache: 클라이언트에서 관리되는 route cache.
6. React.FC<>
과거에는 React.FC<> 또는 FunctionComponent<>를 사용하여 컴포넌트를 정의하는 방식이 일반적이었습니다. 하지만 최근에는 FunctionComponent 또는 FC 타입 사용에 대한 관점이 변화하고 있습니다. 과거에 널리 사용되었음에도 불구하고 현재는 다음과 같은 몇 가지 단점 때문에 권장되지 않습니다:
FunctionComponent 타입은 children 속성을 자동으로 포함하는데, 이는 컴포넌트가 children을 사용하지 않을 때에도 children을 받을 수 있다는 의미이므로 타입의 명확성을 해칩니다.
이 타입은 제네릭을 사용한 복잡한 속성 타입 정의를 충분히 지원하지 않아 유연한 속성 타입 정의에 제약을 줍니다.
FunctionComponent를 사용하는 클래스 컴포넌트에서 defaultProps가 예상대로 작동하지 않을 수 있는 문제가 있습니다.
이러한 이유로, 최근 리액트 개발에서는 FunctionComponent 타입 대신 더 명확한 타입 정의나 다른 타입 헬퍼를 사용하는 것이 권장됩니다. 이는 컴포넌트의 속성 타입을 더 명확하게 하고 개발자의 의도를 정확하게 전달하는 데 도움을 줍니다.
예를 들어, 명확한 타입 정의를 사용하는 방법은 다음과 같습니다:
type WelcomeProps = {
name: string;
};
// 또는 interface 사용
interface WelcomeProps {
name: string;
}ß
const Welcome = ({ name }: WelcomeProps) => <h1>안녕하세요, {name}</h1>;이처럼 타입스크립트와 함수형 컴포넌트를 사용하는 방식은 리액트 애플리케이션 개발에 있어 보다 엄격한 타입 체킹과 함께 명확하고 안정적인 코드 작성을 가능하게 합니다. 이를 통해 개발자는 애플리케이션의 안정성을 높이고 유지 보수를 용이하게 할 수 있습니다.
