[TIL] router-query object in object 와 레이아웃 컴포넌트, image/next

문제

Next.js의 router-query를 이용해 객체 데이터를 전달하려 했으나 수신페이지에서 특정 객체만 수신할 수 없었다.

 

원인

router-query는 url 쿼리 파라미터로 전달되고 다음과 같은 문제가 발생할 수 있다.

 

• 인코딩 문제: 객체는 URL 안전한 문자열로 인코딩되어야 합니다. 이를 위해 encodeURIComponent와 같은 함수를 사용하여 객체를 문자열로 변환하고 인코딩해야 합니다. 그렇지 않으면 URL이 유효하지 않을 수 있습니다.
• 길이 제한: URL에는 길이 제한이 있습니다. 대부분의 웹 브라우저와 서버는 URL의 길이를 제한합니다. 큰 객체를 쿼리 파라미터로 전달하려고 하면 이 제한을 초과할 수 있습니다.
• 읽기 어려움: 복잡한 객체를 URL에 포함시키면 URL이 읽기 어려워집니다. 이로 인해 디버깅이 어려워질 수 있습니다.
• 데이터 손실: 객체를 문자열로 변환하고 다시 객체로 변환하는 과정에서 데이터 손실이 발생할 수 있습니다. 특히 함수, undefined, Symbol 등의 특정 JavaScript 데이터 타입은 JSON 문자열로 변환할 때 손실됩니다.

 

해결

길이 제한 때문에 넘어오지 않은것으로 확인했고 recoil을 사용해 전달하여 해결했다.

 

 

레이아웃 컴포넌트

 

일반적으로 Next.js에서 공용 컴포넌트를 페이지들에게 적용할 때 두가지 방법이 권장된다.

1. 각각의 페이지에서 컴포넌트를 임포트 후 적용하기

2. 레이아웃 컴포넌트를 만들어 아래와 같이 적용 후 모든 페이지 별 루트 컴포넌트로 설정하기

import Tab from '@/components/common/Tab';

function Layout({ children }: { children: React.ReactNode }) {
    return (
        <div>
            <Tab />
            <div>{children}</div>
        </div>
    );
}

export default Layout;

레이아웃 컴포넌트는 여러 페이지에서 공통 사용되는 ui 구조와 요소를 중앙화하고 재사용하기위한 방법이다.-nextjs.org

 

• 중복 제거: 여러 페이지에서 공통으로 사용되는 헤더, 푸터, 사이드바 등의 요소를 한 곳에서 관리할 수 있습니다. 이로 인해 코드의 중복이 줄어들고 유지 보수가 용이해집니다.
• 일관성: 모든 페이지에서 동일한 레이아웃을 사용하면 사이트의 일관성이 유지됩니다. 사용자는 사이트 내에서 일관된 사용자 경험을 얻게 됩니다.
• 유연성: 레이아웃 컴포넌트를 사용하면, 특정 페이지에서 기본 레이아웃을 오버라이드하거나 수정하는 것이 쉽습니다.
• 확장성: 레이아웃 컴포넌트를 사용하면, 나중에 추가적인 기능이나 요소를 쉽게 포함시킬 수 있습니다. 예를 들어, 모든 페이지에 알림 기능을 추가하려면 레이아웃 컴포넌트만 수정하면 됩니다.

 

그렇다면 _app.js (tsx)에 바로 적용하면 안될까?

 

실제로 많은 프로젝트에서 _app.js를 사용하여 전역 레이아웃을 설정한다. 그러나 몇 가지 주의점이 있다.

• 퍼포먼스: 특정 페이지를 제외하려면 추가 작업이 필요하고 불필요한 페이지에도 사용되어 퍼포먼스를 저하할 수 있다.
• 특정 페이지에 대한 레이아웃 커스터마이징: 모든 페이지에 동일한 레이아웃을 사용하는 경우 _app.js는 완벽한 선택입니다. 그러나 일부 페이지에서 다른 레이아웃을 사용해야 하는 경우, 각 페이지 컴포넌트에서 조건부 렌더링 또는 다른 레이아웃 컴포넌트를 사용해야 할 수 있습니다.
• 상태 관리: _app.js는 전역상태관리 라이브러리 등 전역적으로 관리되는 프로바이더를 설정하는 데 더 적합한 위치다.

 

 

next/image

fill을 사용하지 않고 부모요소를 덮는 방법

 <Image
                src={video.thumbnail}
                width={480}
                height={360}
                alt={video.title}
                style={{
                    zIndex: 1,
                    objectFit: 'cover',
                    width: '100%',
                    height: 'auto',
                }}
                onClick={() => onPush(pushData)}
            />