67일차 TIL( FE 질문 / supabase 저장된 Data 읽어오기() )

#5. useRef에 대해 설명해보세요.

 

리액트에서 제공하는 라이브러리 Hook 중 하나로 컴포넌트에서 DOM 요소나 변수 등을 참조하고 관리하기 위해 사용 !

useRef를 사용하면 컴포넌트의 생명주기와 관계 없이 요소,변수에 접근할 수 있음

또한 컴포넌트의 렌더링과 관련 없이 데이터를 저장하고 유지할 때 사용하기도 하는데 컴포넌트의 상태나 props가 변경되어도 해당 데이터가

초기화되지 않는다

단순한 참조를 생성하거나 기존 값을 유지하기 위해 useRef를 사용할 수 있지만 이를 통해 상태관리를 하지는 않는다

상태 변화에 따라 컴포넌트가 리랜더링될 때는 useState나 useReducer 같은 타Hook을 사용해야함 !

 

Supabase - Table editor - 생성된 Table 중 하나를 선택하여 내부의 우측 상단 API에서

 Table에 지정한 각 column에 접근하여 선택해서 불러오거나, 패치, data 삽입. filtering 등을 해줄 수 있다 !

 

예시로는 

유저가 북마크한 store를 모아서 한 곳에 보여주고 싶었다.

 

1. 우선 로그인한 user_id 를 이용해 table 중 bookmark에 접근하여 user_id가 북마크한 store_id의 배열이 필요하다.

 

 

 const [fetchSubs, setFetchSubs] = useState<Bookmark[]>([]);

 

useEffect(() => {
    const Subs = async () => {

   현재 전역으로 관리되고 있는 로그인유저의 정보인 currenUser를 이용한다

   if (currentUser) {
        const userPostId = currentUser.id;
        let { data } = await supabase.from('bookmark').select('*').eq('user_id', userPostId);

         공식문서에서 제공하는 방법이다

         북마크 테이블에 접근하여 * 전체 중에 usr_id(테이블의 행을 선택) 하여 currentUser의 id에 해당하는 배열을 불러온

         다
        if (data) {
          setFetchSubs(data);
          const storeIds = data.map((bookmark) => bookmark.store_id);
          그 data를 담아주고 이 data의 sotre_id만 다시 걸러준다

        if (storeIds.length > 0) {
            let { data: storeData } = await supabase.from('store').select('*').in('id', storeIds);
            걸러진 store_id를 sotreIds로 선언해주고 이를 불러오고자 하는 store 테이블로 접근한다.

.            전체 배열 * 에서 id라는 행에 storeIds에 해당하는 배열들만 불러온다.

             이 data를 storeData로 선언해주며 이 배열을 추출된 배열로 변환하는 작업을 거친다.

             store 객체의 필요한 정보를 추출하여 새로운 객체 배열을 생성하는데,

            if (storeData) {
              const extractedData: Store[] = storeData.map((store) => ({
                id: store.id,
                location: store.location,
                period_start: store.period_start,
                period_end: store.period_end,
                title: store.title,
                body: store.body,
                opening: store.opening,
                images: store.images,
                link: store.link
              }));

              console.log(extractedData);
              setExtractedData(extractedData); // extractedData 설정

              이런식으로 가져온 data를 set해주고 return문에 .map을 활용하여 할당해준다.
            }
          }
        }
      }
    };

    Subs();
  }, [currentUser]);

 

가져오게 되는 data에는 HTML방식으로 전체를 다 받아오는 행도 있을 수 있으며

이미지를 저장할 때 파일명을 변환해서 저장한 경우도 있기 때문에 읽어 올 때 꽤나 번거로운 작업을 해줘야 한다.

supabase를 쓰면서 장점을 알기에 계속해서 시도를 해보는 과정이긴 하지만,

해당 관련 자료나 레거시들이 거의 없기 때문에 공식문서나 외국인들의 남긴 github comment들을 따라가며

해결할 수 밖에 없는게 꽤나 답답한 부분인 거 같다.