React에서 주석을 작성하는 다양한 방법

유용한 주석을 작성하는 것은 보다 효율적인 코딩 프로세스를 달성하는 열쇠 중 하나입니다. 기존 웹 응용 프로그램을 훨씬 쉽게 유지 관리, 디버그 및 구축할 수 있습니다. 프로그래머는 프로젝트를 마치면 다른 작업으로 이동하고 방금 작성한 코드의 세부 사항을 잊어버립니다. 프로그래머는 주석을 사용하여 자신의 생각을 설명하고 코드의 가장 복잡한 부분을 설명할 수 있습니다. 주석을 사용하면 나중에 돌아와서 코드를 쉽게 파악할 수 있습니다. 기능을 추가하거나 디버그하거나 기존 코드를 기반으로 빌드해야 하는 경우 시간을 많이 절약할 수 있습니다.

React 구성 요소는 이상적인 시나리오에서 매우 간단하고 이해하기 쉬워야 하지만 항상 그런 것은 아닙니다. 때때로 구성 요소의 목적과 기능이 불분명할 수 있습니다. 주석을 작성하면 어려운 코드를 설명할 수 있습니다.

React의 주석 - JSX 구문

JSX는 React 애플리케이션 작성을 용이하게 하는 HTML과 유사한 구문입니다. 이를 통해 개발자는 React.createElement() 메서드를 수십 번 호출하는 대신 직관적으로 앱을 구성할 수 있습니다. 컴파일러는 JSX 코드를 바닐라 JavaScript로 변환하는 일을 처리합니다.

React 구성 요소는 일반 JavaScript와 JSX로 구성됩니다. 둘 다에 대한 주석을 작성할 수 있지만 JSX에서 주석을 작성하려면 약간의 추가 작업을 수행해야 합니다. React의 제작자는 JSX 내에서 일반 JavaScript 주석을 허용하지 않기로 결정했습니다. 앞으로 JSX에 대해 별도의 주석 기능을 추가할 계획도 없습니다.

일반 JavaScript에서는 주석을 작성하기 위해 일반 구문을 사용할 수 있습니다. JSX 외부에서 주석을 작성하는 방법은 다음과 같습니다.

class App extends Component {
  render() {
    // single line comment
    /*
    multi
    line
    comment 
    */
    return <h1>Hi! Try edit me</h1>;
  }
}

HTML과 매우 유사하지만 JSX에서 주석을 작성하는 구문은 HTML과 다릅니다. <!-- 및 --> 태그를 사용하여 주석의 시작과 끝을 표시할 수 없습니다.

대신 JSX 내에서 기본 JavaScript 표현식을 작성할 수 있는 중괄호를 사용해야 합니다. 중괄호가 없으면 JSX의 주석은 일반 텍스트로 구문 분석됩니다. 중괄호 사이에 작성되어 있는 한 JSX에서 여러 줄 JavaScript 주석을 입력할 수 있습니다.

다음은 예입니다.

class App extends Component {
  render() {
    return  (
    <div>
    <h1>Sample heading</h1>
    {/* The heading text is large */}
    </div>
    )
  }
}

끝 태그를 이동하고 두 태그가 모두 중괄호 사이에 있는 한 여러 줄에 주석을 작성할 수도 있습니다.

JSX에서 한 줄 주석을 작성하는 것은 조금 더 복잡합니다. // 태그는 닫는 중괄호를 포함하여 전체 행을 자동으로 주석 처리하므로 {//comment}와 같은 것을 작성할 수 없습니다. 한 줄 주석을 추가하려면 닫는 중괄호가 다음 줄에 있는지 확인하십시오. 예를 살펴보겠습니다.

class App extends Component {
  render() {
    return  (
    <div>
    <h1>Sample heading</h1>
    {// comment
    }
    </div>
    )
  }
}

이 구문은 약간 혼란스러울 수 있습니다. 대부분의 React 개발자는 주석의 시작과 끝을 명확하게 구분하기 위해 여러 줄 구문을 사용합니다.

이에 대해 더 알고 싶다면 playcode에서 JSX의 주석 달기를 탐색할 수 있습니다.