🐣 트러블슈팅 1

FetchUserData.tsx (1)

🚨 중복 페칭 문제 (FetchUserData.tsx 실효성 X)
🚨 provider로 children을 감싸자
🚨 useContext vs 컴포넌트 트리 프롭스 전달

데이터가 사용되는 모든 컴포넌트에서 매번 데이터를 가져오고 있었고,
FetchUserData.tsx는 애초에 존재 이유도 없었음을 깨달았어요...

⭐ 위 문제를 개선한 provider 방식

🖥️ FetchUserDataProvider.tsx

'use client';

import { supabase } from '@/supabase/client';
import React, { useEffect } from 'react';
import useUserStore from '@/stores/user.store';

export const FetchUserDataProvider = ({ children }: { children: React.ReactNode }) => {
  const { setUserId, setNickname, setLevelName, setAttendance, setEmail } = useUserStore((state) => state);

  useEffect(() => {
    const fetchUserData = async () => {
      const { data: authData, error: authError } = await supabase.auth.getUser();
      if (authError) {
        console.error('Authentication user data fetch error:', authError);
        return;
      }

      const user = authData?.user;
      if (user) {
        // console.log('Fetched user ID:', user.id); // 디버깅 코드 추가
        setUserId(user.id);
        setEmail(user.email ?? null);

        // TODO: supabase users 한 번만 가져와도 되지 않습니까? 예?
        // TODO: 맞습니다...

        const { data: nicknameData, error: nicknameError } = await supabase
          .from('users')
          .select('nickname')
          .eq('id', user.id)
          .single();
        if (nicknameError) {
          console.error('닉네임 가져오기 실패:', nicknameError);
        } else {
          setNickname(nicknameData.nickname ?? ''); // 전역 상태에 닉네임 설정
        }

        const { data: levelData, error: levelError } = await supabase
          .from('users')
          .select('level_id')
          .eq('id', user.id)
          .single();
        if (levelError) {
          console.error('레벨 가져오기 실패:', levelError);
        } else if (levelData.level_id) {
          const { data: levelNameData, error: levelNameError } = await supabase
            .from('level')
            .select('name')
            .eq('id', levelData.level_id)
            .single();
          if (levelNameError) {
            console.error('레벨 이름 가져오기 실패:', levelNameError);
          } else {
            setLevelName(levelNameData.name); // 전역 상태에 레벨 이름 설정
          }
        }

        // users 테이블에서 출석 횟수 가져오기
        const { data: attendanceData, error: attendanceError } = await supabase
          .from('users')
          .select('attendance')
          .eq('id', user.id)
          .single();
        if (attendanceError) {
          console.error('출석 횟수 가져오기 실패:', attendanceError);
        } else {
          setAttendance(attendanceData.attendance);
        }
      }
    };

    fetchUserData();
  }, [setNickname, setLevelName, setUserId, setAttendance, setEmail]);

  return <>{children}</>;
};

export default FetchUserDataProvider;

루트 레이아웃에서 children을 provider로 감싸주면,
각 컴포넌트에서는 상태관리랑 렌더링만 하면 된다..!
리팩토링 혹은 코드 라인 줄이면서 떠는 호들갑이
사실 마음으로 와닿지 않을 때가 많았는데, 이건 진짜 좀 아름답다.
왜냐면 아무것도 모르는 내 눈에도 컴포넌트마다 반복되는 fetching은
정말,, 구렸거든용...ㅎ

GrowthSummary는 유저 데이터가 사용되는 여러 컴포넌트들 중 하나로, 데이터를 전역상태로 관리하고 직접 렌더링하는 역할을 한다. provider 덕분에 데이터 fetching을 수행할 필요가 없어졌다.

🌀 수정 전

'use client';
import { supabase } from '@/supabase/client';
import React from 'react';
import { useEffect } from 'react';
import useUserStore from '@/stores/user.store';

export const FetchUserData = () => {
  const { setUserId, setNickname, setLevelName, setAttendance, setEmail } = useUserStore((state) => state);

  useEffect(() => {
    const fetchUserData = async () => {
      const { data: authData, error: authError } = await supabase.auth.getUser();
      if (authError) {
        console.error('Authentication user data fetch error:', authError);
        return;
      }
      const user = authData?.user;
      if (user) {
        setUserId(user.id);
        setEmail(user.email ?? null);

        const { data: nicknameData, error: nicknameError } = await supabase
          .from('users')
          .select('nickname')
          .eq('id', user.id)
          .single();
        if (nicknameError) {
          console.error('닉네임 가져오기 실패:', nicknameError);
        } else {
          setNickname(nicknameData.nickname ?? '');
        }

        const { data: levelData, error: levelError } = await supabase
          .from('users')
          .select('level_id')
          .eq('id', user.id)
          .single();

        if (levelError) {
          console.error('레벨 가져오기 실패:', levelError);
        } else if (levelData.level_id) {
          const { data: levelNameData, error: levelNameError } = await supabase
            .from('level')
            .select('name')
            .eq('id', levelData.level_id)
            .single();

          if (levelNameError) {
            console.error('레벨 이름 가져오기 실패:', levelNameError);
          } else {
            setLevelName(levelNameData.name);
          }
        }

        const { data: attendanceData, error: attendanceError } = await supabase
          .from('users')
          .select('attendance')
          .eq('id', user.id)
          .single();

        if (attendanceError) {
          console.error('출석 횟수 가져오기 실패:', attendanceError);
        } else {
          setAttendance(attendanceData.attendance);
        }
      }
    };

    fetchUserData();
  }, [setNickname, setLevelName, setUserId, setAttendance, setEmail]);
  return null;
};

🖥️ GrowthSummary.tsx

'use client';

import React, { useEffect, useState } from 'react';
// import FetchUserData from '@/lib/utils/FetchUserData';
import FetchMembershipDays from '@/lib/utils/FetchMembershipDays';
import useUserStore from '@/stores/user.store';
import ProfileStages from '../molecules/ProfileStages';
import { supabase } from '@/supabase/client';
import AttendanceCheck from '@/lib/utils/AttendanceCheck';

const GrowthSummary = () => {
  const { nickname, levelName, membershipDays, userId, setLevelId, updatedLevelId } = useUserStore((state) => state);

  useEffect(() => {
    const fetchUserLevelId = async () => {
      if (userId) {
        const { data: user, error } = await supabase.from('users').select('level_id').eq('id', userId).single();

        if (!error && user) {
          setLevelId(user.level_id); // Global 상태 업데이트
        } else {
          console.error('사용자 레벨ID 가져오기 실패: ', error);
        }
      }
    };
    fetchUserLevelId();
  }, [userId, setLevelId]);

  return (
    <>
      {/* <FetchUserData /> */}
      <AttendanceCheck />
      <FetchMembershipDays />

      <div
        className="flex flex-row w-[98rem] h-[14.8rem] sm:w-[38rem] sm:h-[9.6rem] pt-[3.2rem] pb-[2rem] sm:pt-[1.2rem] sm:pb-[1.2rem] bg-white
      rounded-tr-[2rem] rounded-tl-[2rem]"
      >
        <div className="ml-[3.2rem] sm:ml-[2rem] w-[9.6rem] h-[9.6rem] sm:w-[7.2rem] sm:h-[7.2rem]">
          {updatedLevelId && <ProfileStages size={96} />}
        </div>{' '}
        {/* updatedLevelId 사용 */}
        <div className="items-center ml-[1.6rem]">
          <span className="font-semibold text-[2.6rem] sm:text-[1.8rem] text-[#008A02]">{levelName}</span>
          <span className="font-semibold text-[2.6rem] sm:text-[1.8rem] ml-[1.6rem] sm:ml-[0.8rem]">
            {nickname} 님의 정원
          </span>

          <div className="font-semibold text-[1.8rem] sm:text-[1.3rem] text-[#727272]">
            <p>플랜트리와 함께 {membershipDays}일째,</p>
            <div className="flex justify-between">열심히 나무를 키우고 계시네요!</div>
          </div>
        </div>
      </div>
    </>
  );
};

export default GrowthSummary;

---

FetchUserData.tsx (2)

🚨 useEffect 내에서 데이터를 페칭하는 것은 안티 패턴

• ❓useEffect 내부 데이터 페칭 지양하는 이유

🚨 하나의 훅에서 너무 많은 작업이 이루어지고 있다
🚨 로컬 전역상태관리와 데이터 페칭과 연동 상태관리를 분리해야 효율적

• 모달 사용에만 zustand를,
  그 외에는 TanstackQuery사용
• 커스텀훅 사용

---

FetchUserData.tsx (3)

🚨 userId가 있을 때만 나머지 정보를 불러오게 enbled 옵션 사용
🚨 전체 정보 렌더링 컴포넌트 & 개별 정보 렌더링 컴포넌트

• 커스텀 훅 구별해서 사용
• children을 감싸는 방법

---

기능 : 데이터 페칭, 데이터 렌더링, (자동) 업데이트, 조건부 렌더링
문제 : 중복 페칭, 가독성 저하, 단일 훅의 여러가지 기능, 낮은 이해도
목적 : 데이터 페칭 로직 간결화, 전반적인 가독성 향상

---

??, 널 병합 연산자 (Nullish Coalescing Operator)

왼쪽의 값이 null 또는 undefined일 경우, 오른쪽의 값을 반환.

?. (Optional Chaining Operator)

?.는 옵셔널 체이닝 연산자로, user가 null 또는 undefined인 경우,
에러 없이 undefined를 반환한다.
즉, user가 정의되어 있을 경우에는 user.id를 반환하고,
그렇지 않으면 undefined를 반환.

🖥️ const userId = user?.id ?? null;

user?.id의 결과가 null 또는 undefined일 경우,
?? 연산자 우측의 값 즉, null을 userId에 할당한다.

만약 user?.id가 0, false, 빈 문자열("") 같은 "falsy" 값이어도,
그 값 그대로 반환되는데, 이는 논리적 OR (||)와의 차이점이다.
|| 연산자는 falsy한 값을 만나면 우측 값을 반환하는 반면,
??는 null과 undefined만 처리한다.

➡️ user?.id가 null 또는 undefined이면 null을 반환하고,
그렇지 않으면 user?.id의 값을 userId에 할당하는 코드.