# 조건부 렌더링

JavaScript 프로그래밍에서 조건 처리는 일반적으로 `if`, `switch` 문과 함께 사용합니다. JSX 또한 JavaScript 객체이므로 JavaScript 프로그래밍이 가능합니다. 아래 예시는 함수 실행 과정에 전달된 매개변수의 조건의 참, 거짓 유무에 따라 반환되는 React 요소가 달라집니다.

{% tabs %}
{% tab title="if문 조건 처리" %}

```jsx
function conditionalRendering(content, isStrong = false) {
  if (isStrong) {
    return <strong>{content}</strong>
  } else {
    return <p>{content}</p>
  }
}


// <p>조건부 렌더링</p>
const normalMessage = conditionalRendering('조건부 렌더링')

// <strong>조건부 렌더링</strong> 
const strongMessage = conditionalRendering('조건부 렌더링', true)
```

{% endtab %}

{% tab title="switch문 조건 처리" %}

```jsx
const switchRendering = (emotion) => {
  switch (emotion) {
    default:
    case '좋아요':
      return getEmotionFace('good.jpg', emotion)
    case '훈훈해요':
      return getEmotionFace('so-good.jpg', emotion)
    case '슬퍼요':
      return getEmotionFace('sad.jpg', emotion)
    case '화나요':
      return getEmotionFace('angry.jpg', emotion)
    case '후속기사원해요':
      return getEmotionFace('want.jpg', emotion)
  }
}

switchRendering('후속기사원해요')
```

{% endtab %}
{% endtabs %}

#### 라이브 예제

{% embed url="<https://codesandbox.io/s/jsx-in-action-02-xkmi5?file=/src/index.js>" %}

### 인라인 조건 처리 <a href="#inline-conditional" id="inline-conditional"></a>

조건 처리는 React 요소의 속성에서도 사용할 수 있습니다. 예를 들어 [3항 식](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)을 사용해 JSX 안에서 조건 처리 하거나,

```jsx
<abbr title={abbrs.jsx ? abbrs.jsx : null}>{headline}</abbr>
```

논리 곱(`&&`, AND) / 합(`||`, OR) 연산자를 사용한 조건 처리도 가능합니다.

```jsx
<abbr title={abbrs.jsx || null}>{headline}</abbr>
```

또는 함수를 활용해 조건 처리된 값을 JSX 안에 설정해 처리할 수 있습니다. 함수는 값을 반환하니까요.

```jsx
function findAbbr(key) {
  if (key in abbrs) {
    return abbrs[key]
  } else {
    return null
  }
}

const abbr = <abbr title={findAbbr('jsx')}>{headline}</abbr>
```

{% hint style="danger" %}
JavaScript 식과 함수는 값을 반환하기에 JSX 코드에서 사용할 수 있지만, 문은 값을 반환하지 않으므로 JSX 코드에서 사용할 수 없습니다. (if, switch, for, while 문 등)
{% endhint %}

{% hint style="warning" %}

#### Vue의 조건부 렌더링

Vue와 Angular는 템플릿 엔진을 사용하고, 디렉티브(Directives)를 사용해 [조건부 렌더링](https://v3.ko.vuejs.org/guide/introduction.html#%E1%84%8C%E1%85%A9%E1%84%80%E1%85%A5%E1%86%AB%E1%84%86%E1%85%AE%E1%86%AB%E1%84%80%E1%85%AA-%E1%84%87%E1%85%A1%E1%86%AB%E1%84%87%E1%85%A9%E1%86%A8%E1%84%86%E1%85%AE%E1%86%AB) 합니다.

{% code title="Vue의 조건부 렌더링(Conditional Rendering)" %}

```markup
<div id="conditional-rendering">
  <span v-if="seen">이제 나를 볼수 있어요</span>
</div>
```

{% endcode %}
{% endhint %}