로그인 처리된 값을 전역으로 공유 가능한가요?

[이영호]

어떤 컴포넌트(layout.js) 에서 렌더링 될 시 이 사람이 로그인 된 사용자인지 손님인지 확인하고 , global변수에 반영합니다.

이 전역 값을 각 컴포넌트 에서 가져다 쓰고 싶은데(손님인지 회원인지 등) 가능한 방법이 있을까요?

[codingapple]

props로 보내면 되는데 그냥 필요한 곳에서 getServerSession, useSession 쓰는게 더 편합니다

[이영호]

예전에 만든 백엔드를 재 사용하려고 하는데
원래는 쿠키 값 이용해서 , 로그인 요청 시 백엔드에서 요청 응답에 쿠키 값 넣어주면, 크롬에 쿠키값이 들어갔고
그 쿠키값이 자동으로 모든 요청시에 들어가면서 인증 과정이 진행되었었는데요
생각해보니 서버사이드 렌더링이다 보니깐, 유저의 쿠키값을 모를 것 같은데 아예 다른 방법으로 접근해야 할까요?
강의에 나온 부분은 아예 인증/인가 부분을 next에서 처리하는 것 같아서요, next는 페이지만 보여주고 인증 인가는 만들어둔
백엔드에서 진행하려고 합니다!

[codingapple]

다른 백엔드쓰는거면 ajax 요청으로 로그인해서 로그인정보 가져오고
그걸 state나 로컬스토리지에 저장해두고 필요한 곳 까지 props전송하거나 해서 씁시다

[이영호]

알려주신대로 state로 저장하고, props로 가져와서 쓰려고 했는데.. 찾아보니 propsDrilling 이라고 하네요 이게 좀 심해져서
useContext 사용해서 했습니다! 

하긴 했는데 csr 컴포넌트 안에 children으로 ssr컴포넌트 넣어도 아무런 문제가 없는게 맞나요?

layout에서 context묶으려고 했는데 ssr이라서 안된다고 해서 이렇게 했습니다.

layout.js
<QueryProvider>
    <ClientWrapper> <- 이게 'use client'입니다.
    <DefaultLayout></DefaultLayout>
    {children} <- 여기에는 ssr인 각종 페이지 들이 들어가는 걸로 알고있습니다.
    <Footer></Footer>
    </ClientWrapper>
</QueryProvider>

작명은 나중에 변경할 예정이긴 한데 ClientWrapper 이녀석입니다. 

일단 실행은 문제 없는데 이렇게 하는게 문제가 없는 방식인가요?


혹시나 몰라서 ClientWrapper 컴포넌트도 첨부합니다

'use client'
import {UserContext} from "@/app/hooks/useContext/UserContext";

export default function ClientWrapper(props){

    return(
        <div>
            <UserContext.Provider value={"hello"}>
            {props.children}
            </UserContext.Provider>
        </div>
    )
}

[codingapple]

별문제 없을걸요

[이영호]

아 별 문제 없군요 감사합니다!!

[글쓴이]

글