---
description: 리액트에서 if문을 사용하려면 즉시실행함수 형태로 사용해야하기 때문에 AND연산자가 훨씬 간편한 방법이 될 수 있다.
---

# 6. \[React 리팩토링] JSX에서 조건문 사용해 렌더링하기

![image](https://user-images.githubusercontent.com/37580034/89106209-d560dd00-d462-11ea-960a-98eeb0119dbb.png)

[예발자닷컴](https://www.yebalja.com) 연간 캘린더의 일정 요소들을 보면, 다 똑같이 생긴것 같지만 사실 조건에 따라 3가지로 구분된다.

#### 1. hover시 고정된 width를 갖는 기본 클래스

가장 기본이 되는 일정 클래스이다. 200px 정도의 고정 `width`를 갖고 있다.

![image-20200729201505171](https://user-images.githubusercontent.com/37580034/89107343-620f9900-d46b-11ea-84c5-161cf9821eaf.png)

```javascript
<li className={styles.calendar_entry}
```

#### 2. girdColumn 을 width로 갖는 클래스

이 클래스는, 일정의 길이가 200px보다 긴 일정들이 자기 자신 길이만큼 `width`를 가질 수 있도록 만든 클래스이다. 만약 원래 `width`보다 `hover` 했을 때의 `width`가 더 작게되면, 요소의 전체 부분에서 `hover`가 적용되는게 아니라 좌측 200px만큼만 `hover`가 적용되게 된다. 그 문제를 해결하고자 만들었다.

![image-20200729201606726](https://user-images.githubusercontent.com/37580034/89107344-63d95c80-d46b-11ea-8c00-a9529613ff4c.png)

```javascript
<li className={classNames({[styles.calendar_entry]: true, [styles.oversize_list]: true})}
```

#### 3. girdColumn 을 width로 갖고, 오른쪽 border-ridus가 0인 클래스

내년으로 일정이 이어지는 요소들이 있다. 이때는 오른쪽 `border-ridus`를 0으로 만들어서, 내년으로 일정이 이어지는 느낌을 주기 위해 클래스를 따로 빼줬다.

![image-20200729202053158](https://user-images.githubusercontent.com/37580034/89107345-6471f300-d46b-11ea-8d84-4e0e3c9171a3.png)

```javascript
<li className={classNames({[styles.calendar_entry]: true, [styles.oversize_list]: true, [styles.next_year]: true})}
```

비슷하게 생겼지만 클래스가 조금씩 다르게 적용되기때문에 리스트 태그 하나로만 컴포넌트를 만들수가 없었다. 어차피 더미데이터 리팩토링 할때도 조건부 렌더링이 필요할 것 같아서, JSX 내부에서 조건문을 사용하는 방법을 알아봤다.

## 1. 조건부 렌더링

### 1) 삼항연산자

삼항연산자는 `True` 일 때와 `False` 일 때 결과값이 다른 경우 사용한다.

```javascript
import React from 'react';

export default function App {
    return (
      <div>
        {
          1 + 1 === 2 
            ? (<div>맞아요!</div>)
            : (<div>틀려요!</div>)
        }
      </div>
    );
}
```

삼항연산자는 아래처럼 자바스크립트 객체 내부에서도 사용할 수 있다.

```javascript
backgroundColor: (title === "선발") ? "#4DF0FF" : "#CBDFFD",
```

### 2) AND연산자

조건이 `True` 일 때만 결과값을 보여주고 싶을때 사용한다. 개념상으로는 `if문`과 뭐가 다른가 싶지만, 리액트에서 if문을 사용하려면 _즉시실행함수_ 형태로 사용해야하기 때문에 AND연산자가 **훨씬 간편한 방법**이 될 수 있다.

```javascript
import React from 'react';

export default function App {
    return (
      <div>
        {
          1 + 1 === 2 && (<div>맞아요!</div>)
        }
      </div>
    );
}
```

### 3) If문

복잡한 조건문은 JSX 외부에서 작성하는 것이 권장되지만, `IIFE(즉시실행함수)`를 사용하면 JSX 내부에서도 if문을 작성할 수 있다.

> **즉시실행함수란?** 함수를 정의함과 동시에 호출하는 함수

```javascript
import React from 'react';

export default function App {
    return (
      <div>
        {
          (function() {
            if (value === 1) return (<div>하나</div>);
            if (value === 2) return (<div>둘</div>);
            if (value === 3) return (<div>셋</div>);
          })()
        }
      </div>
    );
}
```

* if문 대신 switch문을 사용할때도 즉시실행함수롤 사용한다.
* 위의 조건문은 다음과 같이 `화살표함수`로 고쳐서 쓸 수도 있다.

```java
(() => {
  if (value === 1) return (<div>하나</div>);
  if (value === 2) return (<div>둘</div>);
  if (value === 3) return (<div>셋</div>);
})()
```

## 2. 리팩토링 후의 `StepListItem` 컴포넌트

![image](https://user-images.githubusercontent.com/37580034/89107416-f11cb100-d46b-11ea-9f48-0779c4384620.png)

컴포넌트화 하기전의 코드와 비교해보면 150줄 이상 코드를 줄인 것 같다. 리액트 짱..😅👍

[리팩토링 전 코드](https://github.com/FiveEat42/yebalja.com/blob/refactor/mihykim/front/components/YearlyCalendar.js)
