NextJS와 타입스크립트를 제대로 공부하지 않고 무턱대고 시작한 사이드 프로젝트.
유저 정보 파트를 맡게 되어 회원가입/로그인, 마이페이지 등 유저 관련 페이지를 맡게 되었다.
노마드코더의 캐롯마켓 영상을 보고 부랴부랴 로그인/회원가입 페이지를 가라?로 만들고 우리 프로젝트에 맞게 적용시켰다.
그런데 문제가 발생했다.
디자인이 완성되기 전 와이어프레임을 보고 헤더바를 만들게 되었는데
클라이언트 컴포넌트에서 hydration 이슈로 인해, 로그인 여부에 따라 프로필 사진을 조건부로 렌더링하는 이 간단한 기능을 구현하지 못했다.
첫 번째 방법
내가 생각한 첫 번째 방법으로는 간단하게 session 만 불러와서 boolean을 줄려했다.
{session ? (
<div>
<Link href={'/profile'}>
{' '}
{pathname === '/profile' ? (
<span className="text-red-500">MyProfile</span>
) : (
<span>MyProfile</span>
)}
</Link>
</div>
) : (
<Link href={'/sign-in'}>로그인</Link>
)}그러나 이 컴포넌트는 클라이언트 사이드에서 실행되어야 했기 때문에, 비동기 session 함수를 사용할 때 서버 사이드 렌더링이 필요하다면 use server를 사용하여 서버에서 처리해야 했다. 이로 인해 hydration 문제가 발생하게 되었다.
두 번째 방법
일단 이론상 첫 번째 방법은 틀린 방법은 아니였지만 어떻게 해? 였다.
일단 나는 타입스크립트도 NextJS도 응애이기 때문에 해결할 방법이 떠오르지 않았다.
그래서 나는 머얼~~~리 돌아가보았다.
세 번째 방법
타입에 대해, NextJS에 대해 잘 알았다면 쉬웠겠지만 일단 나는 아니기에 몸이 힘든 길을 택해보았다.
몸이 힘든 방법은 매우 간단했다.
- 조건부 렌더링에 해당하는 부분만 다른 헤더 하나 더 만들기
- 로그인을 안하면 url 그냥 막아버리기
일단 1번이 가장 쉬운 방법이지만 이렇게 만들고 결과보고 하기 너무 창피할 거 같아서 머릿속에서 바로 지웠다.
그래서 2번을 택하게 되었다.
흠.. 말이 없네..
정해진 디자인은 아니였지만 사진만 봐도 위에 헤더도 없고 이게 모달인지 페이지인지 분간은 가지 않지만 2번 방법의 의도에 끼워맞출 수 있다고 생각이 되어 강제로 막아버리는 방법을 택하게 되었다.
네 번째 방법
세 번째 방법으로 완성을 시켜두고 다음 회의만을 기다리며 타입스크립트를 공부하고 있는 와중에 번뜩 '그냥 prop으로 전달하면 되지 않나?' 라고 생각만 했다.
이 생각을 그동안 못한 이유는 숙련도 이슈도 있었겠지만 서버, 클라이언트 컴포넌트에 대한 생각에 이 방법은 생각도 못하고 있었다.
그냥 애초에 클라이언트 컴포넌트에는 비동기 함수 값을 전달하지 못할것이라고 생각하고 있었다.
다시 두 번째 방법으로 되돌아왔다.
근데 prop을 어디서 줘야할까, 이 헤더 컴포넌트의 부모 컴포넌트가 뭘까
그건 바로 layout!
이때부터는 수월하게 layout에서 user와 session을 가져와서 id 값을 비교하고 존재하는 user를 반환해 prop으로 전달해주었다.
사실 NextJS고 타입이고를 떠나서 React로 해결했네
