[React] 값식문

동기

React 컴포넌트 return 문 내부(JSX 문법을 사용하는 공간)에서 if문을 사용하지 못해요.
(왜 불편하게 그러는거니!)

삼항 연산자나 단축 평가를 사용해야 합니다.

🤔 왜 if문을 쓰면 안되는지 궁금해졌습니다.

---

값식문

먼저 값식문에 대해 알아봅시다.

값 (value)

조작할 수 있는 어떠한 표현

• Left-Value / Right-Value

  • Left-Value: 메모리 주소를 가지고 있어 식별자를 통해 프로그래밍으로 컨트롤할 수 있어요.
  • Right-Value: 단일 표현식에서만 사용되는 임시값입니다.

---

식 (expression)

값을 결정짓기 위해 평가될 수 있는 구문

• 식은 상수, 변수, 함수, 연산자들의 조합으로 이루어져요.

• 식을 통해 또 다른 값을 생성해내는데, 이러한 연산과정을 평가라고 합니다.

---

문 (statement)

수행할 액션의 구문 단위

• 데이터에 어떤 액션을 취할 것인지 결정해요.

• 👇 예를 들면 if문, for문, 함수 호출, 리턴 호출, 선언문, 할당문이 있어요.

const a = 1; // 선언문
b = a + 2; // 할당문

play(game); // 함수호출
return; // 리턴 호출

for // 반복문
if // 조건문

• 문(statement)은 식(expression)을 내부요소로 가질 수 있어요.

• 문은 실행시 사이드이펙트를 발생시킵니다.

  • 사이드이펙트란?
    • 요구되어지는 이펙트 이외의 다른 이펙트가 발생하는 현상입니다.
    • 꼭 나쁜 결과만을 도출하는 것은 아니예요.

---

JSX → JS 변환

// JSX
<div id="msg">Hello World</div>,

// JS -> type, props, children
React.createElement('div', { id : 'msg' }, 'Hello World')

컴파일이 끝나면 JSX 표현식이 정규 JavaScript 함수로 호출이 되고 JavaScript 객체로 인식됩니다.

React.createElement가 Javascript 객체를 반환해요.

const element = React.createElement("h1");
// 객체를 반환합니다.
{
  type: 'h1',
  props: {}
}

왜 if문은 못 쓰나요?

자 그럼 본론으로 돌아옵시다.
값식문과 JSX->JS 변환을 왜 살펴봤을까요?

JSX표현식은 JS 객체로 인식된다고 했어요.
아래 코드를 살펴보시죠!

ReactDOM.render(
  <div id={if (condition) { 'msg' }}>Hello Wrold</div>,
  mountNode
);

// transfiling to JS
ReactDOM.render(
  React.createElement('div', { id : if (condition) { 'msg' } }, 'Hello World'), mountNode)
);

😱 이상합니다.

• 객체 내부에 if문이 들어갔어요!
• 객체 내부에 문(statement)이 들어갈 수 있나요?
• 이건 불가능하죠!

👍 결론적으로

1. JSX는 JS 객체로 변하게 되고 객체에는 문 이 올 수 없어요.
2. 그래서 React의 { }에는 값과 식만 들어갈 수 있습니다. (값, 식: 상수, 변수, 함수, 연산자)