React 컨벤션

올라핀테크 프론트엔드 프로젝트 내에서 지켜야하는 React 컨벤션을 서술합니다.

컴포넌트 정의

함수형 컴포넌트

Named Export 사용
Arrow Function 또는 Function Declaration 모두 허용

// ✅ Named Export (Arrow Function)
export const DraggableBottomSheet = ({
  isDrawerOpen,
  handleDrawerOpen,
}: DraggableBottomSheetProps) => {
  // ...
}

// ✅ Named Export (Function Declaration)
export function ResponsiveModal({
  content,
  mobileType = 'sheet',
}: ResponsiveModalProps) {
  // ...
}

Props 타입 정의

Props 인터페이스/타입은 컴포넌트 위에 정의
Props 네이밍: {ComponentName}Props

interface DraggableBottomSheetProps {
  isDrawerOpen: boolean
  handleDrawerOpen: (isOpen: boolean) => void
  threshold?: number
  bottomDrawerContent: React.ReactNode
  bottomDrawerButton: React.ReactNode
}

export const DraggableBottomSheet = ({
  isDrawerOpen,
  handleDrawerOpen,
  threshold = 20,
  bottomDrawerContent,
  bottomDrawerButton,
}: DraggableBottomSheetProps) => {
  // ...
}

Hooks

Custom Hooks

use- prefix 사용
파일명: use-{hook-name}.ts

// ✅ use-breakpoint.ts
export const useBreakpoint = () => {
  const { md, lg } = TailwindTheme.screen

  const isMobile = useMediaQuery(`not all and (min-width: ${md})`)
  const isTablet = useMediaQuery(
    `only screen and (min-width: ${md}) and (max-width: ${lg})`
  )
  const isDesktop = useMediaQuery(`only screen and (min-width: ${lg})`)

  return {
    isMobile,
    isTablet,
    isDesktop,
  }
}

React Query Hooks

React Query를 사용한 데이터 페칭 로직은 domain/{domain}/hooks/ 에 위치

// domain/auth/hooks/use-sign-in.ts
export const useSignIn = () => {
  const { trackEvent } = useTrackEvent()
  return useMutation({
    mutationFn: async (data: SignInRequest) => {
      const result = await signIn(data)
      if (result.type === ACTION_TYPE.FAIL) {
        return {
          status: 'SERVER_ERROR',
          message: '잠시 후 다시 시도해주세요.',
        } as const
      }
      // ...
    },
  })
}

React Hook Rules

ESLint 규칙 엄격 적용
react-hooks/rules-of-hooks: error
react-hooks/exhaustive-deps: warn

기타 규칙

Promise 처리

모든 Promise는 적절히 처리 (ESLint @typescript-eslint/no-floating-promises)

// ❌ Bad
handleConfirm(accountNumber)

// ✅ Good
void handleConfirm(accountNumber)
// 또는
await handleConfirm(accountNumber)

사용하지 않는 변수

접두사 _ 사용하여 무시 가능

// ✅
const handleClick = (_event: MouseEvent) => {
  doSomething()
}

React 컨벤션

On this page