react-hook-form3 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 시작하기 - 간단한 Login 페이지 만들기 (1) Router 시작하기전체적인 프로젝트 세팅이 끝났으니, 이제 본격적으로 페이지를 만들어볼 차례다. 빠른 개발을 위해 MUI를 적극적으로 사용하여 직접 스타일링을 하는 경우를 최대한 줄이고자 하지만, React-Hook-Form과 MUI를 사용하는 것에 있어서 컨트롤적인 문제가 발생하는 부분이 있다. 때문에 이러한 문제가 발생하는 부분에 대하여 직접 스타일링을 하는 부분 또한 존재할 예정이다.만약 MUI를 어쩔 수 없이 꼭 React-Hook-Form과 사용하고자 한다면, 사용법을 함께 첨부할 예정이다. 필자는 방법을 알아내는데 너무 많은 삽질이 들어갔다.Next.js의 라우팅 방식Routing - 페이지 간의 이동을 관리하는 방법이다. NextJS 14 Folder StructureOnce again, it’s 5 .. 2024. 5. 30. 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 반응형
