ESLint 규칙 중 arrow-body-style 란?

프로그래밍을 하는 과정에서 자바스크립트를 다룰 때 코드를 더 깔끔하고 읽기 쉽게 만드는 다양한 문법이 있습니다. 그중에서도 화살표 함수는 코드의 간결함과 가독성을 극대화하는 데 큰 역할을 합니다. 하지만 화살표 함수도 가끔은 잘못 사용될 수 있습니다. 이때 도움이 되는 ESLint 규칙 중 하나가 바로 arrow-body-style입니다.

arrow-body-style 규칙이란?

arrow-body-style 규칙은 코드를 작성할 때, 화살표 함수의 본문을 간단하게 혹은 필요에 따라 중괄호를 사용하여 적절하게 작성했는지를 확인해 주는 ESLint 규칙입니다. 이 규칙은 코드의 일관성을 유지하고 가독성을 높이며, 불필요한 중괄호를 피할 수 있도록 도와줍니다.

일반적인 사용 방식

화살표 함수는 간단한 표현식에 최적화된 문법으로, 별도의 return 문 없이 값을 반환하며, 중괄호 없이도 작성 가능합니다.

예시: 중괄호 없는 본문

// 단순한 표현식에서는 중괄호를 생략할 수 있습니다.
const add = (a, b) => a + b;

하지만 여러 줄의 구현이 필요할 경우, 중괄호와 명시적인 return 키워드가 필요합니다.

예시: 중괄호 있는 본문

// 여러 줄의 코드가 필요한 경우 중괄호와 return이 필요합니다.
const addVerbose = (a, b) => {
  const sum = a + b;
  return sum;
};

arrow-body-style 규칙의 동작 방식

arrow-body-style 규칙은 주로 아래 세 가지 옵션을 설정할 수 있습니다.

"always": 항상 중괄호를 사용할 것을 권장합니다.
"as-needed": 필요할 때만 중괄호를 사용하도록 권장합니다.
"never": 중괄호를 사용하지 않도록 권장합니다.

기본적인 사용 설정은 "as-needed"로, 필요할 때만 중괄호를 사용하라는 의미입니다. 이렇게 설정하면 불필요한 중괄호를 제거하고 간결한 코드 작성을 장려할 수 있습니다.

ESLint 설정 예시

.eslintrc 파일에서 arrow-body-style을 설정하는 방법은 다음과 같습니다.

{
  "rules": {
    "arrow-body-style": ["error", "as-needed"]
  }
}

위 설정을 통해 필요 없는 중괄호가 쓰였을 때 경고를 유발하고, 코드를 보다 간결하게 유지할 수 있습니다.

결론

arrow-body-style 규칙은 자바스크립트 코드에서 화살표 함수의 간결함을 유지하면서 코드의 가독성을 높이는 데 중요한 역할을 합니다. 필요에 따라 적절히 중괄호를 사용함으로써 코드를 읽기 쉽게 만들고, 불필요한 구문을 최소화합니다. 이 규칙을 통해 코드를 더욱 깔끔하게 관리하고, 팀 간 일관성을 유지하며, 유지보수를 쉽게 만들 수 있습니다. 이제 arrow-body-style을 활용하여 여러분의 코드 품질을 한 단계 높여 보세요!