[TIL] 프리온보딩 8일차 - 220510

1️⃣ 상태 관리 Tool :: Recoil

오늘 처음으로 상태 관리 Tool인 Recoil을 사용해봤다.

그동안 props로 전달하고 또 전달하는게 무의미하다고 생각했는데, react를 좀 더 공부하고 상태 관리 툴을 공부해보자고 한게 갑자기 사용하게 될 줄은 몰랐다.

 

 

나는 recoil 폴더 생성해서 폴더 안에 관리해주고 있는데 코드는 아래처럼 작성하였다.

export const moviePageState = atom<number>({
  key: '#moviePageState',
  default: 1
})

우선 key와 default를 작성해줘야 하는데 멘토님께서 key를 구분하기 위해 앞에 #을 넣는다고 하셔서

나도 따라 썼다..! 아직 key를 사용해본 적이 없어서 좋은지는 모르겠지만 확실히 구분이 갈 것 같다..

 

 

그리고 아래 코드처럼 작성하면 되는데 useState() hook과 똑같은 모양새이다.

const [page, setPage] = useRecoilState<number>(moviePageState)

 

 

오늘 수업을 듣다가 처음 발견한 useResetRecoilState() !

state의 기본값을 이렇게 깔끔하게 돌려주는게 좋아서 인상이 깊었다..

다음에 꼭 사용해봐야지..!

useResetRecoilState(state) | Recoil

 

 

🔽 이 외에 Recoil에 대해 더 알고 싶다면 아래 사이트를 참고하는 것이 좋다.

Recoil 시작하기 | Recoil

 

 

2️⃣ 로딩될 때 사용하는 Suspense

이번에 API를 사용하면서 로딩될 때 사용될 화면이 필요했는데 Suspense를 활용하면 좋을 것 같다.

<Suspense fallback={<div>로딩중...</div>}>
  <ProfilePage />
</Suspense>

 

 

3️⃣ react에서 라우터 사용 시 파라미터 정보를 가져올 수 있는 useParams()

아래와 같이 useParams() hook을 사용하면 params에 파라미터 정보가 저장된다.

const { params } = useParams();

 

 

4️⃣ <Link>와 <NavLink>

- <Link>와 <NavLink>의 차이점은 <NavLink>는 스타일링을 줄 수 있다는 점이다.

// <Link>
<Link to='/about'>About</Link>

// <NavLink>
<NavLink to='help' className={({ isActive }) => cs({ [styles.isActive] : isActive })}>
	help
</NavLink>

 

 

5️⃣ 404 에러뜰 때 나오게 하는 <Route>

<Route path='*' element={<div>404</div>} />

---

 

📍 오늘의 코드 리뷰 ( ZOOM : 7시 20분 경 확인 가능 )

- any 금지 ! (any쓰면 에러 해결이 되길래 써도 되는 줄 알았더니 좋지 않은 습관인 것 같다.)

- eslint 켜기 ! (띄어쓰기가 왜.. 이상하게.. 어서 eslint 설치하자..)

 

 

💡 오늘의 작지만 알찬 꿀팁

- import는 절대경로로 작성하기

- readme 작성하면서 코드짜기

- npm camelCase (https://www.npmjs.com/package/camelcase)

- 디바운싱 : 시간이 많이 걸리는 작업이 자주 실행되지 않도록 하는 방법 (300 추천)