React JSX 에서 ; 의 작성

언어 및 도구들 공부/React

React JSX 에서 ; 의 작성

Dr.Mlem 2024. 11. 28. 13:14

Q1.

(수많은 문답 끝에...)

그래, 그럼 최종적으로 정리해볼게.

어떤 코드가 있을 때,

그 코드의 끝이 JSX의 표현식으로써 끝이 났다면 ;을 붙일 수 없으나,

그렇지 않고, JS의 문장으로써 끝이 났다면 ;을 붙일 수 있는 것인가?

위의 내용이 맞다면,

해당 코드의 위치가 JSX 내부냐 외부냐는 신경쓰지 않아도 될 것 같은데, 어떤가?

A1.

ChatGPT의 말:

당신의 정리는 거의 정확합니다! 하지만 몇 가지 중요한 점을 명확히 하기 위해, 다시 정리해보겠습니다.

1. 결론: 세미콜론(;) 붙이는 기준

1-1. JSX 표현식으로 끝난 경우

JSX 표현식({} 안에서 평가되는 JavaScript 표현식)이 끝난 경우에는 세미콜론을 붙이지 않습니다.
이유: JSX 표현식은 값을 반환하는 표현식으로 동작하며, JavaScript 문장이 아니기 때문입니다.

1-2. JavaScript 문장(statement)으로 끝난 경우

JavaScript 문장이 끝난 경우에는 세미콜론을 붙입니다.
이유: JavaScript 문법에 따라 문장은 세미콜론으로 종료됩니다.

2. 위치가 JSX 내부/외부인지 신경 써야 하는가?

2-1. JSX 내부:

{}로 감싸진 JavaScript 코드는 항상 표현식이어야 합니다.
따라서, JSX 내부에서는 세미콜론을 붙이는 일이 거의 없습니다.
예외적으로 {} 안에서 즉시 실행 함수(IIFE)나 함수 호출을 통해 문장을 포함한 경우, 해당 문장에 세미콜론이 붙습니다.

2-2. JSX 외부:

JSX 외부에서는 일반 JavaScript 코드가 사용되므로, 문장(statement) 끝에 세미콜론을 붙이는 것이 일반적입니다.

결론:

위치가 중요하지 않다.
- 코드가 JSX 내부든 외부든, 중요한 것은 그 코드가 표현식인지 문장인지입니다.
- 표현식이면 세미콜론을 붙이지 않고, 문장이면 붙입니다.

3. 예제로 확인

3-1. JSX 내부에서 표현식으로 끝난 경우 (세미콜론 X):

<div>
  {5 + 10} {/* 표현식 */}
  {isValid ? 'Yes' : 'No'} {/* 표현식 */}
  {items.map(item => <span>{item}</span>)} {/* 표현식 */}
</div>

모든 표현식은 값으로 평가되며, 세미콜론을 붙이지 않습니다.

3-2. JSX 내부에서 문장으로 끝난 경우 (세미콜론 O):

문장이 들어가야 할 경우, 즉시 실행 함수(IIFE) 또는 함수 호출을 사용해야 합니다.

<div>
  {(() => {
    let x = 10; // 문장
    let y = 20; // 문장
    return x + y; // 반환되는 표현식
  })()} {/* IIFE 내부에서는 문장 끝에 세미콜론 필요 */}
</div>

또는:

function calculateSum() {
  let x = 10; // 문장
  let y = 20; // 문장
  return x + y; // 반환되는 표현식
}

<div>
  {calculateSum()} {/* 함수 호출은 표현식 */}
</div>

내부의 let x = 10;처럼 문장이 끝나는 곳에는 세미콜론이 필요합니다.

3-3. JSX 외부에서 JavaScript 문장으로 끝난 경우 (세미콜론 O):

const x = 10; // 문장
function add(a, b) {
  return a + b;
} // 문장
add(x, 5); // 문장

4. 최종 정리

세미콜론 붙이는 기준:
- JSX 표현식으로 끝난다면 세미콜론을 붙이지 않습니다.
- JavaScript 문장으로 끝난다면 세미콜론을 붙입니다.
위치와 무관한 기준:
- JSX 내부({})든 외부든 상관없이, 해당 코드가 표현식인지 문장인지에 따라 세미콜론 사용 여부를 결정합니다.

이제 위치와 관계없이 코드가 표현식인지 문장인지에 따라 세미콜론을 사용하면 됩니다! 😊

Q2.

나의 말:

그렇다면 하나 예를 들어볼게.

{JS 표현식a} 라는 JSX 표현식이 있어.

이때, JS 표현식 a 안에, JS 문장이 들어가있다면, 그 문장은 끝나면서 ;를 붙여주어야 하는것이지?

그리고, JS 표현식 a 자체는 끝에 ;를 쓰지 않고?

A2.

ChatGPT의 말:

정확합니다! 아래에서 제시한 상황을 더 구체적으로 정리하고 설명해 보겠습니다.

상황: JSX 표현식 내부에 JS 문장이 들어 있는 경우

JSX 표현식 내부의 구조:

JS 표현식 a: {}로 감싼 JavaScript 표현식.
- JSX의 {} 내부는 JavaScript 표현식으로 동작합니다.
- 이 표현식 안에 JavaScript 문장이 들어갈 수 있습니다.
JS 문장이 포함된 경우:
- JS 문장은 항상 끝에 **세미콜론(;)**을 붙여야 합니다.
- 하지만 JSX 표현식({}) 자체는 표현식이므로, 끝에 세미콜론을 붙이지 않습니다.

구체적인 예

JS 문장이 포함된 JSX 표현식

<div>
  {(() => {
    let x = 10; // JS 문장이므로 세미콜론 필요
    let y = 20; // JS 문장이므로 세미콜론 필요
    return x + y; // JS 문장에 포함된 표현식
  })()} {/* JS 표현식 a: IIFE로 처리된 표현식, 끝에 세미콜론 없음 */}
</div>

이 코드에서 주의할 점

JS 문장:
- let x = 10;과 let y = 20;은 JS 문장이므로, 각각 끝에 세미콜론을 붙여야 합니다.
JS 표현식 a 자체:
- {} 내부에서 사용된 IIFE((() => { ... })())는 JS 표현식으로 간주되며, JSX의 특성상 끝에 세미콜론을 붙이지 않습니다.
JSX 표현식의 끝:
- {} 자체는 JSX 문법의 일부로, 세미콜론 없이 닫힙니다.

올바른 코드와 잘못된 코드 비교

올바른 코드:

<div>
  {(() => {
    let x = 10; // 세미콜론 필요 (JS 문장)
    let y = 20; // 세미콜론 필요 (JS 문장)
    return x + y; // 세미콜론 필요 (JS 문장)
  })()} {/* 세미콜론 없음 */}
</div>

잘못된 코드:

<div>
  {(() => {
    let x = 10 // 세미콜론 없음 (문법 오류 가능)
    let y = 20 // 세미콜론 없음 (문법 오류 가능)
    return x + y // 세미콜론 없음 (가능하지만 비추천)
  })();} {/* 세미콜론 있음 (JSX 문법 오류 발생) */}
</div>

세미콜론 없는 JS 문장: JavaScript에서는 자동 세미콜론 삽입(ASI)이 동작할 수 있지만, 코드 가독성과 명확성을 위해 문장 끝에는 항상 세미콜론을 붙이는 것이 좋습니다.
JSX 표현식 끝에 세미콜론 붙임: {}로 감싼 JSX 표현식 끝에는 세미콜론을 붙일 수 없으므로 문법 오류가 발생합니다.

결론

1. JSX 표현식 내부의 JS 문장은 끝에 반드시 세미콜론을 붙여야 합니다.

let x = 10; // 세미콜론 필요

2. JSX 표현식({}) 자체는 JS 표현식으로 간주되므로, 끝에 세미콜론을 붙이지 않습니다.

{(() => { ... })()} // 세미콜론 없음

3. JSX 표현식 안에서는 표현식과 문장을 명확히 구분하고, 문장은 세미콜론으로 끝을 명시하며, JSX 문법 자체는 세미콜론 없이 처리합니다.😊

Q3.

나의 말:

하나 더 확인해볼게. React의 함수형 컴포넌트의 경우, export할 컴포넌트를 정의하는 코드 내에서는, js표현식으로 끝났다 하면 ; 없이, js문장으로 끝났다 하면 ; 를 붙이면 되겠네?

A3.

ChatGPT의 말:

정확합니다! React 함수형 컴포넌트의 정의에서도 동일한 규칙이 적용됩니다:

컴포넌트 정의 코드가 JavaScript 표현식(JS 표현식)으로 끝나면 세미콜론(;) 없이 작성합니다.
컴포넌트 정의 코드가 JavaScript 문장(JS 문장)으로 끝나면 세미콜론(;)을 붙입니다.

1. React 함수형 컴포넌트 정의 예시

1-1. JS 표현식으로 끝나는 경우 (세미콜론 없음):

React 함수형 컴포넌트가 JSX 요소를 반환하며 끝나는 경우, 이는 JS 표현식으로 끝나는 것입니다.

const MyComponent = () => (
  <div>
    Hello, World!
  </div>
); // 세미콜론 없음 (JS 표현식으로 끝났으므로)

1-2. JS 문장으로 끝나는 경우 (세미콜론 있음):

컴포넌트 정의 내부에서 로직을 처리하고, return 키워드로 JSX를 반환하는 경우, 전체 코드가 **JS 문장(statement)**으로 간주되며, 세미콜론이 필요합니다.

const MyComponent = () => {
  const greeting = 'Hello, World!'; // JS 문장
  return (
    <div>
      {greeting}
    </div>
  ); // JS 문장으로 끝났으므로 세미콜론 필요
};

2. export 문과의 관계

2-1. JS 표현식으로 끝나는 경우 (세미콜론 없음):

JSX 요소를 바로 반환하는 컴포넌트를 export할 때, 이는 JS 표현식으로 끝나므로 세미콜론을 붙이지 않습니다.

export const MyComponent = () => (
  <div>
    Hello, World!
  </div>
); // 세미콜론 없음

2-2. JS 문장으로 끝나는 경우 (세미콜론 있음):

컴포넌트 정의가 JS 문장으로 끝나는 경우, 세미콜론을 붙여야 합니다.

export const MyComponent = () => {
  const greeting = 'Hello, World!'; // JS 문장
  return (
    <div>
      {greeting}
    </div>
  ); // JS 문장으로 끝났으므로 세미콜론 필요
};

3. 혼합된 예

여러 컴포넌트를 정의한 후 export:

const Header = () => (
  <header>
    This is the header.
  </header>
); // 표현식으로 끝나므로 세미콜론 없음

const Footer = () => {
  const footerText = 'Footer content'; // JS 문장
  return (
    <footer>
      {footerText}
    </footer>
  ); // JS 문장으로 끝나므로 세미콜론 필요
};

export { Header, Footer }; // JS 문장, 세미콜론 필요

4. 최종 결론

React 함수형 컴포넌트 정의에서도 다음 규칙을 따릅니다:

JS 표현식으로 끝난 경우: 세미콜론을 붙이지 않습니다.
- 컴포넌트가 바로 JSX 요소를 반환하는 경우.
JS 문장으로 끝난 경우: 세미콜론을 붙입니다.
- 컴포넌트 내부에서 로직을 처리하고, return 문으로 끝나는 경우.
export 자체는 항상 JS 문장으로 간주되므로 세미콜론을 붙입니다.

React 코드에서도 동일한 기준을 적용해 세미콜론 사용 여부를 결정할 수 있습니다! 😊