commentInJsx.md

JSX 내에서 주석 사용하기

예제코드

function Comment () {
  const name = 'React';
  return (
    <>
      {/* comment1 */}
      {
        // comment2
      }
      <div
        className="react" // comment3
        /* comment4 */
      >
      // comment3
      /*
      comment4
      */
      {name}
      </div>
    </>
  );
}

export default Comment;

• 중괄호 표기 안에서는 /*를 열고 */으로 닫는 방식을 사용한다.
• 중괄호 표기 안에서 { // comment2 } 와 같은 방식으로 사용할 수 있지만 } 부분도 주석 처리가 되어 중괄호를 열고 { 닫지 않은 형태가 되므로 에러이다. 위 코드와 같이 개행해서 //로 주석을 사용하면 된다.
• JSX 태그 내의 속성 부분에서 /*를 열고 */으로 닫는 방식으로 주석을 사용할 수 있고, //으로도 주석을 사용할 수 있다.
• 하지만 중괄호 또는 태그 내부가 아니라면 /* ... */ 또는 // ...을 사용해도 주석 처리가 되지 않고 문자로 랜더링 되는 것을 알 수 있다.