[TIL] 내일배움캠프 React 과정 2023.02.15

Today I Learned

• NetAuth.js 공부하기
• 회원가입 기능 구현

---

NextAuth의 refetchOnWindowFocus 속성

import { SessionProvider } from "next-auth/react"

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider
      session={session}
      // In case you use a custom path and your app lives at "/cool-app" rather than at the root "/"
      basePath="cool-app"
      // Re-fetch session every 5 minutes
      refetchInterval={5 * 60}
      // Re-fetches session when window is focused
      refetchOnWindowFocus={true}
    >
      <Component {...pageProps} />
    </SessionProvider>
  )
}

페이지에 포커스가 갈 때마다 유저의 session 정보를 계속해서 볼러 오는 것 때문에 문제 되는 상황이 있었는데 공식 문서를 보다가 SessionProvider에 refetchOnWindowFocus라는 속성이 있다는 것을 발견했다! 항상 공식문서를 잘 확인해야겠다는 생각이 또 들었다.

 

공식문서 https://next-auth.js.org/getting-started/client

 

React-Modal 외부 영역 클릭했을 때 모달 닫기

<ReactModal
  isOpen={isOpen}
  style={customStyles}
  ariaHideApp={false}
  onRequestClose={() => setIsOpen(false)}
>

boolean 값을 담은 isOpen이라는 속성을 이용해서 onRequestClose에 setIsOpen을 하면 된다.

 

공식문서 https://www.npmjs.com/package/react-modal#examples

 

 

다중 카테고리 선택 구현하기

회원가입 할 때 유저의 관심 지역을 받기로 했는데 카테고리를 다중 선택할 수 있기 때문에 어떻게 구현할지 고민을 했다. 그래도 오래 걸리지 않고 꽤나 재밌는 과정이었다.

 

// signup 페이지 관심 지역 리스트
export const regionArray = ['서울', '강원', '대전', '충남', '세종', '충북', '인천', '경기', '광주', '전남', '전북', '부산', '경남', '울산', '제주', '대구', '경북'];

// 유저가 선택한 카테고리 필터링 리스트
const [myRegionArray, setMyRegionArray] = ([]);

일단 관심 지역 리스트를 배열로 생성한다.

 

{/* 관심 지역 카테고리 선택 */}
<h3>관심 지역 선택</h3>
<S.CategoryContainer>
{regionArray.map((region, index) =>
  region && myRegionArray.includes(region) ? (
    <S.CatrgoryBtn
      onClick={() =>
        setMyRegionArray(
          myRegionArray.filter((item) => item !== region),
        )
      }
      key={index}
      bg={'lightblue'}
    >
      {region}
    </S.CatrgoryBtn>
  ) : (
    <S.CatrgoryBtn
      onClick={() => setMyRegionArray([...myRegionArray, region])}
      key={index}
      bg={'transparent'}
    >
      {region}
    </S.CatrgoryBtn>
  ),
)}
<S.CatrgoryBtn bg={'transparent'} onClick={() => setMyRegionArray([])}>
  전체 초기화
</S.CatrgoryBtn>
</S.CategoryContainer>

regionArray에 map을 돌려서 화면에 리스트를 띄우고 각 카테고리를 선택할 때마다 myRegionArray에 해당 요소를 하나씩 추가한다. 이미 선택한 것을 다시 클릭하면 filter를 이용해서 해당 요소를 배열에서 제거하도록 했다. 결과적으로는 myRegionArray를 유저의 DB에 올리게 된다.

 

---

회고

항상 공식문서를 열심히 보자. 공식문서에 답이 있다는 걸 뼈저리게 느낀 하루였다!! 캠프 시작하고 TIL을 이렇게 오래 쉬었던 적이 없는데 며칠 동안 기능 구현이 너무 안 돼서 속상하고 힘들어서 글을 정리해서 올릴 여유가 없었다. 다행히 고통의 시간을 지나고 오늘은 기력을 좀 회복했다ㅋㅋ 오늘 굉장히 집중해서 회원가입 기능 구현을 마쳤고 그 과정에서 코딩하는 즐거움도 오랜만에 느꼈다🥳 이렇게 천천히 다시 자신감을 되찾고 열심히 해봐야겠다!