[Next.JS] 세션 업데이트

MinJi·2024년 10월 28일

FrontEnd

목록 보기
13/13

기존 프로젝트에서 데이터를 조회할 때 파라미터로 세션에 있는 값을 가져다가 쓰는 경우가 대부분이었다. 그래서 문제가 생겼다.

이런 느낌인데 data1의 값을 가지고 다른 컴포넌트에서 데이터를 조회할 때 쓴다는 거다.
data1의 값이 바뀌면 당연히 다른 컴포넌트에서도 바뀐 값으로 조회가 되어야 할 텐데 기존에는 저 data1이 처음에 로그인 할 때 세션 정보에 저장이 되고 바뀌는 경우가 없었다.
그런데 VOC 처리 과정에서 저 값을 선택하여 변경할 수 있는 기능이 필요했고 이에 따라 세션 정보를 업데이트해야 했다.

Next-Auth는 session.update() 함수를 가지고 있었다.


session.update(data) 냅다 작성하고 실행했지만, 결과는 실패.
왜 안될까?하면서 온갖 뻘짓은 다했다.

클라이언트 단에서 useSession()으로 session 가져와서 직접 데이터 대입을 해보기도 하고..
서버 단에서 getServerSession()으로 session 가져와서 직접 데이터 대입을 해보기도 하고..
처음엔 성공한 줄 알았다. 왜냐면 그렇게 직접 데이터를 바꾸고 페이지를 이동하면 변경한 값이 유지가 되었기 때문에..(키보드엔 왜 새로고침 버튼이 있는걸까..)

새로고침을 하자마자 처음 로그인할 때 저장되었던 값들로 세션 정보가 돌아왔다..끄악..
그렇게 해탈하고 외면하기를 몇일 째...

새로운 마음으로 다시 해보자 마음 먹고 공식문서를 보기 시작했다..
🔗 https://next-auth.js.org/getting-started/client#updating-the-session

❓❓❓❓❓❓❓😶😶❓❓❓❓❓❓❓

그렇다. 나는 callback 안에 update 지정도 안해놓고 냅다 쓴거였다..
공식 문서에 나온 방식을 보며 내 데이터 형태에 맞게 작성하였더니 바로 성공했다...

공식 문서는 꼼꼼히 확인하는 습관을 들여야겠다.

💡결론

세션 업데이트 하는 방법
1. useSession()을 통해 Session 을 가져온 후 update 함수를 호출한다.

const session = useSession();
session.update(data)
  1. update 함수 호출 시 처리 로직 구현하기
export default NextAuth({
  ...
  callbacks: {
    await jwt({token, trigger, session}) {
  		if (trigger === "update" && session){
  			// 데이터 값 대입
		}
	return token;
	}
  }
})

0개의 댓글