[JS] 왜 JSX 안에선 if 문을 사용할 수 없을까? 표현식과 문 차이점

TL;DR

---

￭ 자바스크립트 프로그램은 일련의 문(Statement)으로 구성된다

￭ 각 문은 변수 생성, if, else 조건 실행, 루프 시작과 같은 작업을 수행하는 명령이다

￭ 표현식은 값을 생성하는 자바스크립트 코드다 → 표현식은 항상 값을 생성한다

￭ 모든 함수의 인자는 표현식이다. 문은 값을 생성하지 않으므로 함수 인자에 사용할 수 없다

￭ 문은 프로그램을 하나로 묶는 단단한 구조이며, 문의 세부사항은 표현식으로 채워진다

￭ 표현식은 단독으로 존재할 수 없고, 항상 문의 일부다

￭ 문은 표현식 슬롯을 제외하곤 본질적으로 비어있다

￭ 문이 비어 있을 때도 표현식은 항상 문의 일부다

￭ JSX의 {} 중괄호는 표현식 슬롯을 만든다

￭ 표현식 슬롯에선 값을 생성하지 않는 문은 사용할 수 없다

 

표현식 | Expressions

---

￭ 표현식은 기본적으로 값을 생성하는 자바스크립트 코드다

￭ 즉, 표현식은 항상 값을 생성한다

￭ 아래 코드는 모두 표현식이다

// 아래 코드는 모두 표현식이다
1                    // 1 생성
("hello")            // 'hello' 생성
5 * 10               // 50 생성
num > 100            // true | false 생성
isHappy ? "🇹🇭" : "🇰🇷" // 이모지 생성
[1, 2, 3].pop()      // 3 생성

 

￭ 표현식은 표현식을 포함할 수 있다.

￭ (5 + 1) * 2 표현식 안엔 몇 개의 표현식이 있을까?

인터렉션 출처 Josh Comeau

1. 전체 표현식 : (5 + 1) * 2 → 12로 평가
2. 괄호안 덧셈 : (5 + 1) → 6으로 평가
3. 괄호안 첫번째 숫자 : 5 → 5로 평가
4. 괄호안 두번째 숫자 : 1 → 1로 평가
5. 곱하는 수 : 2 → 2로 평가

 

문 | Statements

---

문은 선언문, 할당문, 조건문, 반복문 등으로 구분한다. 문은 let, function, class 같은 선언 키워드로 변수나 함수를 생성하거나, if, for, while 같은 제어문으로 프로그램의 흐름을 제어한다.

 

￭ 자바스크립트 프로그램은 일련의 문(Statement)으로 구성된다

￭ 각 문은 컴퓨터에게 특정 작업을 지시한다

￭ 아래는 대표적인 문의 예시

let num = 5;
if (num > 10) { /* More statements here */ }
throw new Error("Something exploded!");

 

￭ 문은 프로그램을 하나로 묶는 단단한 구조이며, 문의 세부사항은 표현식으로 채워진다

￭ 문에는 표현식을 넣을 수 있는 슬롯이 있는 경우가 많다

￭ 표현식 슬롯엔 모든 종류의 표현식을 사용할 수 있다

￭ 변수 선언에도 표현식 슬롯이 있다(할당문)

let hi = /* 표현식 슬롯 */;

let hi = 1;
let hi = 'hello';
let hi = 5 * 10;
let hi = num > 100;
let hi = isHappy ? "🇹🇭" : "🇰🇷";
let hi = [1, 2, 3].pop();

 

￭ 할당문은 값으로 평가되므로 표현식인 문이다

￭ 선언문은 값으로 평가되지 않으므로 표현식이 아닌 문이다

￭ 크롬 개발자 도구에서 표현식이 아닌 문은 항상 undefined를 반환하고, 표현식인 문은 항상 값을 반환한다

let hi; // 선언문 | 표현식이 아닌 문
// undefined | 표현식이 아닌 문이므로 undefined 반환(출력)

let hi = 1; // 할당문 | 표현식인 문
// 1 | 표현식인 문이므로 1이라는 값을 평가하여 1 반환(출력)

 

￭ 문에 표현식 슬롯이 있고, 슬롯에 표현식을 넣으면 코드가 실행된다. 문법 에러가 발생하지 않는다

￭ 하지만 아래 같은 코드에선 문법 에러는 없지만 실행하면 무한 루프가 발생한다

while ('hello') {
  // while 조건식 괄호가 표현식 슬롯이다
  // 'hello'는 바뀌지 않는 값이므로 스크립트가 충돌할 때까지 계속 실행된다
  // 문제가 없는 문법이지만 문제가 발생하는(?) 상황
}

 

문 / 표현식 확인 방법

---

console.log(/* Some chunk of JS here */);

 

￭ 특정 코드 조각이 문 / 표현식인지 확인하고 싶으면 콘솔 로그를 활용하자

￭ 문제없이 실행되면 입력한 코드 조각은 표현식이다

￭ 에러가 발생하면 문 혹은 잘못된 자바스크립트 코드다

￭ 브라우저 콘솔에선 표현식을 어떻게 해석(평가)하는지 출력값을 통해 바로 알 수 있다

￭ 모든 함수의 인자는 표현식이기 때문에 위 같은 트릭이 가능한 것

￭ 표현식은 값을 생성하고 함수로 전달된다

￭ 문은 값을 생성하지 않으므로 함수 인자에 사용할 수 없다

 

표현식인 문 (Expressions as statements)

---

￭ 1 + 2 + 3 표현식을 아무 내용도 없는 test.js 파일에 추가한다고 가정해보자

￭ test.js 파일엔 몇 개의 문이 있는걸까? 0개?

￭ 표현식은 단독으로 존재할 수 없다. 표현식은 항상 문의 일부다

￭ 따라서 test.js 파일엔 아래와 같은 문이 있다고 볼 수 있다

/* 표현식 슬롯 */

 

￭ 문은 표현식 슬롯을 제외하곤 본질적으로 비어있다

￭ 문의 표현식 슬롯에 1 + 2 + 3 표현식을 채우 문이 완성된다

￭ 아래는 모두 올바른 문이다

// 문 1 (할당문)
let hi = /* 표현식 슬롯 */;

// 문 2 (조건문)
if (/* 표현식 슬롯 */) { }

// 문 3 (리턴문)
return /* 표현식 슬롯 */;

// 문 4
/* 표현식 슬롯 */

 

￭ 표현식과 문은 별개다. 표현식이 문이라고 설명하는건 잘못된 것

￭ 위처럼 추가적인 문자를 제공하지 않아도 문은 표현식을 감쌀 수 있다

￭ 투명한 비닐 랩(문)으로 샌드위치(표현식)를 포장하는 것과 비슷하다

￭ 문의 끝엔 ; 세미콜론을 붙인다(문의 종료를 나타냄)

￭ 0개 이상의 문을 {} 중괄호로 묶은 코드 블록 뒤엔 붙이지 않는다(if, while, for, 함수 선언 등)

￭ 세미콜론은 옵션이다

 

JSX에서 중괄호 ⚡️

---

￭ (React) JSX 안에서 {} 중괄호를 이용해 자바스크립트 코드를 추가할 수 있다

function CountdownClock({ secondsRemaining }) {
  return (
    <div>
      Time left:
      {Math.round(secondsRemaining / 60)} minutes!
    </div>
  );
}

 

￭ 하지만 JSX 중괄호 {} 안에서 if, else 같은 문(Statement)을 사용하면 에러가 발생한다

function CountdownClock({ secondsRemaining }) {
  return (
    <div>
      {
        // 🚫 Error!
        if (secondsRemaining > 0) { `${secondsRemaining} seconds left` }
        else { "Time expired!" }
      }
    </div>
  );
}

 

￭ JSX에서 {} 중괄호는 표현식 슬롯을 만든다

￭ 표현식 슬롯에서 값을 생성하지 않는 문은 사용할 수 없다

￭ 즉, JSX {} 중괄호 안에선 값을 생성하는 표현식만 사용할 수 있다

￭ 따라서 if, else 문 대신 삼항 연산자(Ternary operator)를 사용해야 한다

function CountdownClock({ secondsRemaining }) {
  return (
    <div>
      {secondsRemaining > 0 // ✅ OK
        ? `${secondsRemaining} seconds left`
        : "Time expired!"}
    </div>
  );
}

 

￭ 삼항 연산자는 조건을 평가하고 조건의 참/거짓에 따라 다른 값을 반환하는 표현식이다

 

레퍼런스

---

Statements Vs. Expressions

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요