inflearn logo
강의

講義

知識共有

SupabaseとNextを使ったフルスタック開発入門 (Supabase OAuth、Next.js 14をフィーチャー)

9.1 Shareページの作成

useCallback의 디펜던시 배열에 supabase 넣는 이유?

解決済みの質問

84

hello3939

投稿した質問数 6

0

const getUserInfo = useCallback(async () => {
  const result = await supabase.auth.getUser();
  if (result?.data?.user) setUser(result?.data?.user);
}, [supabase]);

이 코드를 이해 못했어요. 왜 dependency 배열에 supabase가 들어가나요? userId 넣으면 왜 안되나요?

react 클론코딩 next.js supabase

回答 2

0

dodocoding

질문의 의도는 아래처럼 함수 인자로 userId를 전달하는 경우 인가요? 가능 합니다만 supabase auth를 이용하지는 못합니다.

const getUserInfo = useCallback(async (userId) => {
  const result = await supabase.(profile db 등).getUserById(userId);
  if (result?.data?.user) setUser(result?.data?.user);
}, [supabase]);
const getUserInfo = useCallback(async () => {
  const result = await supabase.auth.getUser();
  if (result?.data?.user) setUser(result?.data?.user);
}, [supabase, userId]);

위 처럼 userId가 의존성 배열에 들어가도 의미는 없습니다.

질문의 의도를 잘 모르겠네요. ㅠㅠ

 

의존성 배열은 특정 변수가 바뀌는것을 캐치 하느냐 안하느냐 판단하면 됩니다.

  • 특정 변수가 바뀌는데 이를 캐치했다라면 변경된 최신의 변수와 함께 useCallback, useMemo등이 갱신됩니다.

  • 그렇지 않다라면 예전의 낡은 변수, 인스턴스를 보고 있겠죠?

 

0

communityai8509

안녕하세요, 인프런 AI 인턴입니다. 웰시코기님.

useCallback의 디펜던시 배열에 supabase가 포함된 이유에 대해 설명드리겠습니다. useCallback은 리액트에서 함수의 메모이제이션을 위해 사용되는 훅입니다. 이는 주어진 의존성(dependency) 배열에 포함된 값들이 변경될 때마다 새로 함수를 생성합니다.

Supabase 의존성의 의미:

  • 의존성 배열: useCallback의 의존성 배열은 함수가 다시 생성될 조건을 정의합니다. 배열 안의 값이 변경되면, 함수가 다시 생성됩니다.
  • supabase 객체: supabase 클라이언트 객체가 변경될 가능성이 있을 때를 대비해 배열에 포함시킵니다. 일반적으로 이는 많이 발생하지 않습니다. 하지만 객체 참조가 변경되면 새로운 함수를 보장함으로써, 항상 최신의 supabase 인스턴스를 사용하는 안전성을 확보할 수 있습니다.

userId가 아닌 이유:

  • userId 의존성: 만약 useCallback 함수 내부에서 userId 변수가 사용되었다면, 그리고 userId의 변경에 따라 함수가 재생성되기를 원한다면 의존성 배열에 포함해야 할 것입니다.
  • 현재 코드에서는 사용되지 않음: useCallback 내부에서는 userId가 사용되지 않고 있기 때문에, 의존성 배열에 포함될 필요가 없습니다. 포함시키지 않음으로써 불필요한 함수 재생성을 피할 수 있습니다.

참고할 수 있는 유사한 질문:

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

vsCode 대신 커서를 사용

0

78

2

mac 터미널 설정이 궁금합니다

0

74

1

DBeaver와 supabase connection

0

280

2

가상환경 같은건 없나요?

0

102

3

serverComponent=false일 때 쿠키 세팅을 하는 이유?

0

122

2

getUser 에 갑자기 serverComponent가 추가된 이유?

0

90

2

getUser 에 갑자기 serverComponent가 추가된 이유?

0

91

2

수파베이스 인증 토큰에서 개인정보 지우는 법?

0

152

2

Server Actions CRUD 로직, RLS 테스트 권한 error

2

124

2

DBeaver로 supabase connection해보기

0

426

2

Supabase CRUD 하기 또는 REST API화 하기 중 질문이 있습니다.

1

251

2

Direct connection / Transaction pooler / Session pooler 차이가 무엇인가요?

1

576

2

LiveDemo 페이지 정상작동하나요?

2

136

2

서버 컴포넌트에서 API 호출 시 Supabase의 클라이언트/서버 클라이언트 차이점이 궁금합니다.

0

329

2

7.2 구글 로그인 1 - AuthUI 구현 구글 로그인 관련 질문드립니다.

0

397

2

7.2 강 구글 로그인 1 강좌에서 redirectTo 로 설정해도 이동이 안되요.

0

409

3

로딩에 대한 질문

1

199

1

DBeaver는 왜쓰는 건가요?

2

657

1

혹시 ssr과 csr을 병행하여 사용하고 싶을 땐

1

277

2

타입에러에 관해 질문있습니다

0

287

4

9.1 강의에서 생긴 servercomponent 변수

2

278

2

3:07에 const result = 입력하는 부분은 복붙인가요??

0

176

1

{10.2장] 로그인 후 새로고침 해야 todolist가 보입니다

0

224

1

serverComponent 가 갑자기 강의에서나와요

0

264

1