[TIL] Today I Learned #6 (2022.05.10)

오늘 배운 내용

Link vs. NavLink

Link:

• 페이지를 정의해 둔 것이 있으면 바로 나오도록 한다.
• 브라우저의 주소만 바꿀뿐, 페이지를 새로 불러오지는 않는다.

navlink :

• 특정 링크에 스타일을 넣어줄 수 있다.
• activeStyle, activeClassName는 현재 URL과 to가 가리키는 링크가 일치할 때 활성화된다.

Route 잘못된 링크를 들어갔을 때 예외처리 간단하게 하기

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

CSS 딜레이

transition: 200ms;
transition-delay: 500ms; /*딜레이*/

3초마다 한번씩 불러오기

useMount(() => {
  interval = setInterval(() => {
      ...
  }, 3000)
})

useUnmount(() => {
	clearInterval(interval)
})

Recoil

reset 기능을 주어 3개를 쓰는 습관을 들이면 좋다.

export function useRecoil<T>(recoilState: RecoilState<T>): [T, SetterOrUpdater<T>, Resetter] {
  const [value, setter] = useRecoilState(recoilState)
  const resetter = useResetRecoilState(recoilState)
  return [value, setter, resetter]
}

dovenv

(중요!) Frontend 코드는 당장 털려도 아무 문제 없이 짜야한다.
.env로 숨겨버리자!
API KEY는 REACTAPP으로 시작하도록 작성하자.

환경변수가 변경되면 서버를 다시 시작하자.

참고

Hooks

• React 버전 16.8부터 추가.
• 상태값과 여러 React의 기능을 사용할 수 있음.

개발 규칙

• modal은 재활용성을 생각해서 작성하자
• ul 바로 밑에 li가 올 수 있도록 짜면 좋다.
• Typescript에서 Any는 쓰지 말도록 하자.
• 통일성!
• 숫자는 number를 앞에 붙여주기
• Array는 초기값을 Array로 넣는 것을 추천한다.
• console.log는 push 전에 지워주자.
• module.scss 이름은 소문자를 추천한다.
• Readme.md 잘 작성해두기
• maxline 150 추천

기타 용어들

• React Query 문서
• React Suspense (로딩) 문서
• 다국어지원 / BabelEdit 사이트