(7) JSX 4

5. ESLint와 Prettier 적용하기

---

(1) ESLint

* ESLint는 문법 검사 도구이고, Prettier는 코드 스타일 자동 정리 도구이다. 해당 도구는 이전에 설치했으며, 이 절에서는 사용하는 방법을 간략하게 알아보자. 혹 아직 설치하지 않았다면 VS Code 마켓플레이스에서 ESLint와 Prettier를 설치하자.

* ESLint는 코드를 작성할 때 실수를 하면 에러 혹은 경고 메시지를 VS Code 에디터에서 바로 확인할 수 있게 해준다.

* 예를 들어 주석을 잘못 입력해서 입력한 내용이 화면에 그대로 나오고 있는 상황이라면 다음과 같이 에디터에서 확인할 수 있다.

노란 색으로 밑줄이 쳐진 곳에 마우스를 올리면 경고 메시지가 출력된다.

* 에디터 하단에 뜨는 문제 탭은 VS Code의 상단 메뉴에서 보기 > 문제를 클릭하여 열 수 있다.

* 지금 에디터에 뜬 경고처럼 초록색 줄이 그어진 코드는 고치기 싫다면 그냥 무시해도 된다. 하지만 빨간색 줄이 그어진 코드는 반드시 고쳐야 한다. 예를 들어 이전에 배운 감싸인 요소 규칙을 어기면 다음과 같이 에디터에 오류가 나타난다.

* 이런 오류는 고치지 않으면 페이지가 브라우저에서 나타나지 않는 치명적인 오류이므로 꼭 고쳐주어야 한다.

---

(2) Prettier

* JSX를 작성할 때는 코드의 가독성을 위해 들여쓰기를 사용한다. 들여쓰기가 제대로 되어 있지 않은 코드는 매우 힘들기 때문이다. 기존 코드를 다음과 같이 한번 작성해 보자.

import React from "react";
import './App.css';

function App() {
  const name = '리액트';
  return (
    <div>
      <div className="react">{
        name
      }</div>
          <h1>들여쓰기가 이상한</h1>
        <h2>코드</h2>
      <p>입니다.</p>
            </div>
  );
}

export default App;

* 코드가 굉장히 난잡한데, 이 코드를 정리해 보자. VS Code에서 [F1]을 누르고 format이라고 입력한 다음 [Enter]를 누르자. 만약 여러분이 다른 포맷 도구(예: Beautify)를 설치했다면 충돌이 발생할 수 있으니 주의하자.

import React from "react";
import "./App.css";

function App() {
  const name = "리액트";
  return (
    <div>
      <div className="react">{name}</div>
      <h1>들여쓰기가 이상한</h1>
      <h2>코드</h2>
      <p>입니다.</p>
    </div>
  );
}

export default App;

* Prettier를 사용하여 자동 코드 정리를 하면 코드가 제대로 정렬되고, 세미콜론(;)이 빠진 곳에는 세미콜론이 자동으로 추가되고, 기존에 사용하던 작은따옴표는 모두 큰따옴표로 바뀌었을 것이다.

* 자바스크립트에서는 문자열을 표현할 때 작은따옴표를 써도 되고 큰따옴표를 써도 된다. 세미콜론은 코드의 뒷부분에 무조건 있어야 하는 문자가 아니다. 이는 단순히 코딩 관습의 차이일 뿐이다. 주로 협업하는 과정에서 정하는 규칙이고, 사람들마다 다른 방식을 사용한다.

* Prettier의 장점은 이러한 스타일을 쉽게 커스터마이징할 수 있다는 것이다. 현재 열려 있는 프로젝트의 루트 디렉터리(src, public 디렉터리들이 위치한 곳)에서 .prettierrc라는 파일을 생성한 후 다음 내용을 입력해 보자.

{
    "singleQuote": true,
    "semi": true,
    "useTabs": false,
    "tabWidth": 2
}

* 이 파일에서는 들여쓰기를 할 때 탭 대신 공백을 두 칸 사용하도록 했다. 그리고 큰 따옴표 대신 작은 따옴표를 쓰게 했고, 세미콜론은 언제나 붙이도록 설정했다. Prettier에서는 이 외에도 다양한 코드 스타일을 사전 설정할 수 있다. 이에 대한 내용은 Prettier Options 페이지를 참고하자.

https://prettier.io/docs/en/options

Prettier · Opinionated Code Formatter

[저장할 때 자동으로 코드 정리하기]

* 코드 스타일을 정리할 필요가 있을 때마다 [F1] 키를 누른 후 Format을 입력하는 것보다, 혹은 단축키를 입력하는 것보다 더 편한 방식은 저장할 때 자동으로 정리하게 만드는 것이다.

* 물론 이 설정은 취향에 따라 불필요할 수 있다. 만약 코드 정리를 수작업으로 하고 싶다면 이 설정은 생략해도 무방하다.

* VS Code 환경 설정은 Code(윈도우의 경우 파일) > 기본 설정 > 설정 메뉴를 클릭하여 열 수 있다. 다음으로 상단 텍스트 박스에서 format on save를 검색하여 나타나는 체크 박스에 체크해 주면 된다. 이제부터는 저장할 때마다 코드가 자동으로 정리될 것이다.

---

6. 정리

* JSX는 HTML과 비슷하지만 완전히 똑같지는 않다. 코드로 보면 XML 형식이지만 실제로는 자바스크립트 객체이며, 용도도 다르고 문법도 조금씩 차이가 난다. 이전에 다룬 몇 가지 문법 차이를 잘 기억해 두자. 아직은 JSX 밖에 배우지 않았으므로 할 수 있는 것이 별로 없다. 다음에 컴포넌트를 자세히 알아보면서 리액트를 적극적으로 활용하는 방법을 배워 보자.