Home컴포넌트의 nav기능 변경 - 8일차

이전 글에서는 Home component를 다루는 page.tsx에서 nav의 기능을 다루도록 하였다. 하지만 나의 프로젝트 특성상 nav기능은

모든페이지에서 적용되므로 다시 Layout.tsx에서 그리도록 변경하였다. next.js의 파일구조를 명확하게 파악하지 못하여 발생한일이다.

사진과 보다시피 사이드에서 nav가 위치하고 있고 모든 내용들이 가운데에서 렌더링 되도록 하려는 구조였다. next.js 페이지 단위로 로드가 이루어진다는 생각에 메인 page.tsx에 nav기능을 넣은거 였다. 

base Layout

Layout.tsx

page.tsx

코드는 변경된것이 없다. 다만 코드의 위치변경을 해주었다. 이러한 점은 Login창을 구현하려할때 발견하였다. 기본적으로 유지되어야하는 Layout이 적용되지 않아서 알게 되었다. 아마 React의 영향이 아닌가 싶다. React에서는 화면 그대로를 가져가기위해서는 Component 자체를 Props로 전달하여 그려주는 방식때문에 잠시 헷갈렸다.