React 개발에 고려할 사항들

소개된 10가지 사례중, 현재 가장 기억하고 싶은 3가지만 우선 정리한다.

1. 상대 경로 대신 절대 경로를 사용하라.

jsconfig.json 설정

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"]
}

@절대경로 사용

import { Input } from '@/components/Input'

3. Export Default 대신 Named Export 를 사용하라.

“export default” 는 임포트시, 이름을 변경이 가능하다는 장점이 있다.
만약, default 를 모든 파일에 기본적으로 사용할 경우, 문제가 발생할수 있다.

• 여러 파일에 같은 "Login"이름이 default로 사용되었을 경우, 임포트시 혼란

const login() {
  return <>tela de login</>
}
export default Login

const login() {
  return <>tela de registro</>
}
export default Login

const login() {
  return <>tela de esqueci minha senha</>
}
export default Login

이 혼란을 막기 위해서, default 보다 명명된 export 사용을 추천한다.
default는 필요한 경우에만 사용하는 것이 좋다. 예를 들어, Next.js routes, React.lazy 에서 default의 사용을 요구할수 있다.

9. useCallback, useMemo를 사용한 퍼모먼스 최적화

• memoization : 호출의 결과를 캐싱하고 동일한 입력이 다시 발생할 때 캐싱된 결과를 반환하는 프로그래밍 기술
• useCallback: 함수 memoization
• useMemo : 값 memoization
  함수와 값의 빈번한 재생성을 막아, 어플리케이션의 퍼포먼스를 향상시킨다.

https://medium.com/@renanolovics/10-best-practices-in-front-end-development-react-5277a671e2df