JSX에 '문'이 올 수 없는 이유 (값식문)

문법이 중요한 이유

컴퓨터 언어의 문법 에러는 서비스 장애로 직결된다. 그만큼 문법은 프로그래밍에서 중요한 요소이다.
문법 요소 중 파괴되기 쉬운 부분은 값식문이다. 따라서 문법의 기본인 값식문의 개념에 대해 반드시 숙지하도록 하자.

값식문

값(value)

• 프로그램이 조작할 수 있는 표현
• 불변

식=표현식(expression)

• 값으로 평가될 수 있는 문
• 식은 문에 포함됨

문(statement)

• 최소 실행(액션) 단위
• 표현식인 문과 아닌 문으로 나뉨

JSX에 '문'이 올 수 없는 이유

객체({}) 안에는 문을 넣을 수 없다. 객체 안에는 값과 식만 올 수 있다.
JSX는 Babel을 통해서 객체로 바뀌기 때문에 문을 넣을 수 없는 것이다.

아래 JSX는 객체 내부에 if 문이 들어왔기 때문에 잘못된 코드이다.

// JSX:
<div id={if (condition) { 'msg' }}>Hello World!</div>

// Is transformed to this JS:
React.createElement("div", {id: if (condition) {'msg'}}, "Hello World!");

ReactDOM.render(<div id={condition ? 'msg' : null}>Hello World!</div>, mountN)

// 결국 if 문을 객체에 넣은 것이 된다
const obj = {id: if (condition) { 'msg' }}; 

식은 값으로 귀결될 수 있기 때문에 객체에 넣을 수 있다.

const obj = { condition ? 'msg' : null };

즉시 실행 함수(IIFE)를 사용하면 문을 객체 안에 넣을 수 있긴 하다.

<p>
  {
    (() => {
      switch (this.state.color) {
        case 'red'
          return '#FF0000';
        case 'green'
          return '#00FF00';
        default:
          return '#FFFFFF';
      }
    })()
  }
</p>


<p>
  {
    (() => {
      const rows = [];

      for (let i - 0; i < objectRows.length; i++) {
        rows.push(<objectRow key={i} data={objectRows[i]}/>);
      }
      return rows;
    })()
  }
</p>

즉시 실행 함수는 즉시 실행되며, 값을 리턴하기 때문이다.

하지만 굳이 이런 식으로 코드를 난해하게 작성하지 않아도 아래와 같이 식을 사용하면 간단하게 해결할 수 있다.

// 논리 연산자 사용
<p>{ this.state.color || 'white' }</p>

// map 메서드 사용
<p>
  {objectRows.map((obj, i) => (
    <ObjectRow key={i} data={ObjectRows[i]} />
  ))}
</p>

---

참고
클린코드 자바스크립트