다중 props 상태로 styled-components 스타일링 하기
styled-components는 컴포넌트 간의 분리와 재사용성을 높여주며, 스타일의 일관성을 유지하는 데 도움이 됩니다. 부모 컴포넌트에서 상속받은 props의 상태가 여러 상황일 때, 효율적인 사용방법을 알아보겠습니다. 물론 저는 Next.js와 Typescript 사용을 기본으로 합니다. 1. 재사용할 Button 컴포넌트 만들기import Link from 'next/link'; import styled from 'styled-components'; const Button = ({ size, href, children }: ButtonStyledType)) => { const { size, href, children } = props; return ( {children} ); }; export d..
Next.js - Routing 정적 라우팅, 동적 라우팅, 링크 활용하기
Next.js는 일반적인 리액트의 페이지 기반 라우팅과 다르게 파일 기반 시스템으로 되어있어, vscode 같은 통합개발환경에서 개발을 위해 폴더와 파일을 만들면 그 구조가 자연스럽게 라우팅에 활용되도록 해줍니다. 정적 라우팅과 동적 라우팅을 활용하는 방법을 알아보겠습니다.1. 정적 라우팅정적 라우팅은 라우트가 빌드 타임에 결정되는 것을 의미합니다. 이 경우, 각 페이지에 대한 라우트가 사전에 정의되어 있으며, 사용자가 해당 페이지를 요청하면 라우팅이 발생합니다. 아래는 정적 라우팅 구조의 예시.- pages - index.js - about.js - contact.js위의 예시에서는 index.js, about.js, contact.js 파일이 각각 /, /about, /contact 경로로 이동됩니다..