상수 선언, 어디에서 하시나요?

[Sang-minKIM]

컴포넌트, 훅 또는 일반 함수에서 매직 넘버를 없애기 위해, 또는 고정된 객체나 배열을 기반으로 로직을 다루기 위해 상수를 선언해서 사용하는 경우가 많은데요.
이때 상수를 어디에 선언하시나요?

저는 상수는 컴포넌트와 별개라고 생각해서 보통 컴포넌트 외부에 작성해왔습니다.
상수가 컴포넌트 리렌더링 시에 재선언되어야 할까? 라고 했을 때 그렇지 않다고 생각했기 때문인데요.
(유틸 함수도 같은 이유로 컴포넌트 밖에 선언했었어요)

frontend-fundamentals를 읽고 이전의 코드들을 다시 살펴보다보니 상수가 컴포넌트 밖에 있어서 시점 이동이 일어난다는 걸 인지했습니다.
그리고 특정 함수에서만 사용하는 상수라면, 해당 함수가 생명을 다했을 때 이 상수도 생명을 다한게 아닐까? 라는 의문도 생겼습니다.

예시 1

첫번째로 유틸함수의 예시인데 이렇게 간단하게 매직넘버를 방지하기 위한 상수는 함수 안에 있는게 자연스럽게 읽어졌어요.

export function getNextMonthAndYear(year: number, oneBasedMonth: OneBasedMonth): [number, OneBasedMonth] {
  const NEXT_MONTH_OFFSET = 1
  const JANUARY = 1
  const DECEMBER = 12

  const nextMonth = oneBasedMonth + NEXT_MONTH_OFFSET
  const nextYear = nextMonth > DECEMBER ? year + 1 : year
  const oneBasedNextMonth = nextMonth > DECEMBER ? JANUARY : (nextMonth as OneBasedMonth)
  return [nextYear, oneBasedNextMonth]
}

예시 2

두번째로는 제가 useReducer를 사용할 때 많이 쓰는 방식인데, 액션과 초기값을 상수로 컴포넌트 밖에 선언합니다. 리듀서 함수도 마찬가지이구요.
이 경우에는 상수와 리듀서 함수를 밖에 쓰는게 자연스러워 보여요. 컴포넌트와 독립적으로 선언 되어도 문제가 없고 리듀서 함수가 컴포넌트 안에 있다면 로직이 더 복잡해 보이겠죠.

import { useReducer } from 'react'

export const Example = () => {
  const [state, dispatch] = useReducer(reducer, initialState)

  // ...
  return <></>
}

const initialState: ExampleState = {
  input: '',
  select: '',
  textarea: '',
}

function reducer(state: ExampleState, action: ActionType) {
  switch (action.type) {
    case ACTION_TYPE.SET_INPUT:
      return { ...state, input: action.payload }
    case ACTION_TYPE.SET_SELECT:
      return { ...state, select: action.payload }
    case ACTION_TYPE.SET_TEXTAREA:
      return { ...state, textarea: action.payload }
    case ACTION_TYPE.CLEAR:
      return initialState
  }
}

const ACTION_TYPE = {
  SET_INPUT: 'SET_INPUT',
  SET_SELECT: 'SET_SELECT',
  SET_TEXTAREA: 'SET_TEXTAREA',
  CLEAR: 'CLEAR',
} as const

[ravenkim]

예시 1번의 경우는 여러 함수에서 범용적으로 쓰일 거 같아서 함수 밖이 맞다 고 생각합니다.
(나중에 상수 변경이 필요할 경우)

예시 2는
useReducer 를 사용하는 경우도 리듀서를 다른 파일에서 관리해주고 코드 안쪽에는 useState, useSelector 사용이 코드가 가독성이 좋은 것 같습니다.

[Kimbangg]

예시 1)
코드에서 사용된 상수는 범용성이 높다보니(ex, PI), 이런 경우에는 함수 바깥에 선언해두고 재사용하는 형태를 선호합니다.
습관적인 부분이지만 불필요한 함수 재선언을 방지하기 위해서 함수 바깥에 선언해두기도 합니다.
다만, 함수 및 상수가 특정 도메인을 다루는 등과 같이 지엽적으로 변한다면 함수 내부에 선언해두는게 흐름상 자연스러울 것 같아요.

예시 2)
"리듀서를 분리하는게 자연스럽다" 라고 판단하신 이유를 추측해보면, 상태와 리듀서 함수가 차지하는 공간이 커지면서, 뷰 로직에 대한 집중도를 떨어트려서 일 것 같다는 생각이 들어요.
useReducer에서 사용하는 초기 값과 리듀서의 로직이 커진다면, 별도의 훅으로 분리해두고, 네이밍을 통해 역할을 나타내줘도 좋을 것 같습니다.

[Sang-minKIM]

제가 답변이 많이 늦었습니다.

상수를 어디에 둘지를 판단할때에는 범용성과 로직의 크기를 바탕으로 판단하면 좋겠네요.
대부분의 경우에는 함수 밖에 선언하는게 적절하다고 생각하겠습니다.

의견 감사드려요!