넥스트3 Next.js 시작하기 - 간단한 Login 페이지 만들기 (2) React-Hook-Form 간단한 화면 구성하기로그인 폼을 만들기 위해, 지금부터 MUI로 간단한 화면 구성을 먼저 만들어둘 예정이다. 이때, 모든 페이지는 상단에 bar가 있어야 한다. 모든 페이지에 일일이 bar 컴포넌트를 넣는 대신, 하나의 레이아웃 형태로 모든 페이지가 동일한 bar를 가지고 있을 수는 없을까? 리액트에서도 그랬듯, Next.js에서도 마찬가지로 최상위 파일에 컴포넌트를 지정하고 children을 통해 하위 컴포넌트를 랜더링하면 굳이 모든 페이지에 bar를 지정할 필요 없이 공통적으로 사용할 수 있게 된다. 현재 Next.js의 app 폴더는 다음과 같은 구조로 되어있다.app├── favicon.ico├── globals.css├── layout.tsx├── login│ └── page.tsx├── .. 2024. 6. 9. Next.js 시작하기 - 프로젝트 세팅 (3) Zustand/Typescript+Jest/MUI Zustand 설치상태 관리 라이브러리는 Redux를 많이 사용하지만 Zustand는 학습 난이도가 높지 않고 간편하게 사용할 수 있다는 장점으로 인해 개인 프로젝트에서는 Zustand를 자주 사용한다. Zustand의 특징간결하고 직관적인 사용 방법Hook 기반 API중앙집중식 상태 관리 제공컴포넌트 최적화 zustand는 아래의 명령어를 통해 설치 가능하다.npm install zustand zustand 공식 사이트에서 zustand는 다음과 같이 사용할 수 있다.import { create } from 'zustand'const useStore = create((set) => ({ count: 1, inc: () => set((state) => ({ count: state.count + 1 }.. 2024. 5. 28. Next.js 시작하기 - 프로젝트 세팅 (2) React Hook Form 설치하기https://react-hook-form.com/ React Hook Form - performant, flexible and extensible form libraryPerformant, flexible and extensible forms with easy-to-use validation.react-hook-form.com React Hook Form은 기존의 form 테그를 리액트에서 훨씬 편리하게 사용할 수 있도록 기능을 제공해준다. 또한 html form 테그를 사용할 때 submit을 한 뒤 페이지가 refresh 되는 현상이 발생하지 않는다. 이외에도 에러 문구를 처리하거나 submit 충족 조건을 설정하는 것 등에 대하여 다양한 기능을 제공해준다. (성.. 2024. 5. 19. 이전 1 다음 728x90 반응형
