> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/learning-react-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/learning-react-app/learning-history/jsx-in-action/conditional-rendering.md).

# 조건부 렌더링

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 %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://yamoo9.gitbook.io/learning-react-app/learning-history/jsx-in-action/conditional-rendering.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.