[ TIL ] 2022-05-10

React

• react-router 의 Link와 NavLink

  NavLink 는 특정 Link에 스타일을 적용해줄 수 있다. activeStyle과 activeClassName 속성을 활용하는데,
  리액트 웹의 현재 URL과 to가 가리키는 링크가 일치할 때, activeStyle과 activeClassName이 활성화 되고 일치하지 않으면 비활성화가 된다.

const style = {
  fontWeight:'900',
  color:'blue',
 }
... // 사용 예시
		<ul>
            <li>
              <NavLink to="/about" activeStyle={style}>
                About
              </NavLink>
            </li>
            <li>
              <NavLink exact to="/">
                Home
              </NavLink>
            </li>
          </ul>

• setInterval 은 반드시 clearInterval 과 함께 써라
  interval 을 없애지 않으면 다른 페이지로 이동했을 때도 계속해서 작동하므로, clear 해주는 것이 중요하다

// react-use 사용 예시
let interval: NodeJS.Timeout

useMount(() => {
	interval = setInterval(() => {}, 300)
})

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

• 무한 스크롤 기능은 intersectionObserver
  https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API

• useNavigate

  navigate(0) 은 해당 페이지를 새로 불러옴

• 다국어 지원

  react-i18next, BabelEdit(유료) 조합으로 쓰면 좋다

• 404 페이지는 path='*' 로 구현

• useSearchParams

Recoil

• Recoil 은 한 페이지 안에서, 전역 범위보다 협소한 범위로 쓰는 게 더 좋다. atom, selector, 더 이상 나아가면 가독성이 떨어지게 된다.

• Redux 는 큰 데이터를 잘 다룰 수 있게 발전했으나( Redux toolkit 은 최고다! ), Recoil 은 그에 비해 미완성의 상태라 할 수 있다.

• atom 만 사용하여 Recoil 을 쓰는 것도 좋다. Recoil 은 간단하게 쓸 때 빛을 발한다.

Typescript

• tsconfig.json 에서 아래와 같이 쓰면, src 내부 경로를 절대경로처럼 import 할 수 있다

'include' : [
	'src'
]

CSS

• transition-delay
  transition 속성 아래에 써서 애니메이션 delay 효과를 준다

Git

• git에 파일명 변경 반영하기
  로컬에서 파일명/폴더명을 변경해도 git에 바로 반영되지 않는다. 변경 명령을 해줘야 반영됨!

  콘솔창에 이렇게 치면, git 설정이 변경돼서 대소문자 구분을 반영해준다(최초 1회만 하면 됨)

// 대소문자 구분
git config core.ignorecase false

// 파일명 변경

git mv 예전파일명 바꿀파일명

• 대소문자 인식 명령을 했는데도 안 될 경우, 임시 폴더로 이름을 바꿨다가, 대소문자 변경된 새 이름으로 다시 바꿔주면 된다.

git mv 예전폴더명 임시폴더명
git mv 임시폴더명 바꿀폴더명

Tips

• import 는 라이브러리, 훅, 컴포넌트 등으로 구분해서 정렬해주는 게 좋다
• 디바운스 추천 delay 는 300ms. 기획이나 서버에서 맞추는 경우도 있다.
• props, css modules 는 소문자로 쓰는 게 좋다
• early return 형식을 선호하라

더 알아볼 것

• 디바운싱과 스로틀링
• react query(러닝 커브가 높다)