[React] WARNING 메시지 제거하기

Eunjae Tony Lee·2023년 2월 27일
0

React

목록 보기
8/9
post-thumbnail
/* eslint-disable */

React 코드를 실행하면 터미널에 이상한 경고 메시지가 떠요!

no-unused-vars 같은 경고 메시지가 출력됩니다.
경고 메시지가 출력되어도 앱을 실행하는 데에는 아무런 문제가 없지만 눈에 자꾸만 거슬리고 신경이 쓰이게 되지요.
경고 메시지가 출력되는 원인과 없앨 수 있는 방법을 알아보겠습니다.

0. ESLint란?

ESLint 때문입니다.
ESLint는 자바스크립트 프로그램의 코드에 문법적인 오류가 있거나 표준에 맞지 않고 비효율적인 부분이 있을 때 이를 발견해 수정할 수 있도록 알려주는 역할을 하는 도구입니다.

React를 사용하면 별도로 ESLint를 설치하지 않아도 자동으로 적용되는 것이 기본이며
코드를 실행할 때 검출된 오류와 경고 메시지를 터미널에 출력합니다.

1. ESLint 오류 출력을 없애는 방법

1.1 코드의 오류를 수정하기

당연한 이야기지만 ESLint의 권고를 받아들이고 효율적이고 읽기 편한 방향으로 자신의 코드를 수정하면 오류 메시지를 제거할 수 있습니다. 저도 그렇게 하시기를 추천합니다. 하지만 많은 경우에, ESLint가 지나치게 사소한 부분까지 경고한다고 느끼는 분들이 많으실 것 같습니다. 특히 배우는 과정에서는 작은 경고라도 신경이 쓰여서 빠르게 실습을 진행하지 못하게 되는 경우도 많습니다. 그럴 때에는 다음 방법을 참고해 보세요.

1.2 ESLint의 작동을 해제하기

사소한 오류 메시지가 출력되는 것이 싫으면 ESLint의 작동을 중지시키는 방법도 있습니다.

코드의 맨 윗부분에 다음과 같은 부분을 주석으로 추가해주세요.

/* eslint-disable */

이렇게만 해도 ESLint의 자동 적용을 피할 수 있습니다.
만약 여러 개의 JS 파일이 import 되어 작동한다면 시스템 동작에 필요한 모든 JS 파일에 해당 코드를 추가해주어야 합니다!

profile
철학하는 개발자

0개의 댓글