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

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

image

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

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

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

image-20200729201505171

<li className={styles.calendar_entry}

2. girdColumn 을 width로 갖는 클래스

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

image-20200729201606726

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

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

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

image-20200729202053158

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

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

1. 조건부 렌더링

1) 삼항연산자

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

import React from 'react';

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

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

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

2) AND연산자

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

import React from 'react';

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

3) If문

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

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

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문을 사용할때도 즉시실행함수롤 사용한다.

• 위의 조건문은 다음과 같이 화살표함수로 고쳐서 쓸 수도 있다.

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

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

image

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

리팩토링 전 코드