[React]조건문 작성 방법

이번 포스팅에서는 JSX에서 조건문을 좀 더 깔끔하게 작성할 수 있도록 지원하는 패키지를 소개합니다.

 

목차

1. 지저분한 JSX의 조건문
2. jsx-control-statements 사용

---

지저분한 JSX의 조건문

많은 개발자들은 조건문을 작성하기 위해 if~else문 또는 switch문에 익숙하며, 조건문이 시작되고 있음을 한눈에 파악할 수 있습니다.

 

하지만, JSX에서 조건문을 작성하기 위해 사용되는 삼항 연산자는 코드를 지저분하게 만들며 가독성이 떨어지는 단점이 존재합니다.

 

다음과 같이 간단한 로직이 존재합니다.

if (isLoading) {
  // loading...
} else {
  if (isMain) {
    // title, category 처리...
  }
  // main...
}

isLoading이 true이면, 로딩중이라고 로딩바를 화면에 표시합니다.

 

false인 경우 메인 화면을 표시합니다.

 

isMain이 true이면, 메인 화면에 필요한 정보(title, category 등)를 화면에 표시합니다.

 

isMain이 false이면, 메인 화면에 필요한 정보(title, category 등)가 화면에 이미 표시되어 있으므로 처리하지 않습니다.

 

위 로직을 JSX의 조건문으로 작성하면 다음과 같습니다.

{this.state.isLoading ? (
  <div>Loading...</div>
) : this.state.isMain ? (
  <React.Fragment>
    <div>Header</div>
    <div>Category</div>
    <div>Main</div>
  </React.Fragment>
) : (
  <div>Main</div>
)}

한눈에 봐도 이해하기가 어려운 코드입니다.

 

다음은 jsx-control-statements 패키지를 사용하여 위 코드를 깔끔하고 읽기 쉽게 만들어보겠습니다.

---

jsx-control-statements 사용

jsx-control-statements는 조건문 또는 반복문 컴포넌트를 지원하는 패키지입니다.

 

설치

npm install --save-dev babel-plugin-jsx-control-statements

 

다음은 위에서 작성한 코드를 깔끔하게 작성해보겠습니다.

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isLoading: false,
      isMain: true
    };
  }

  render() {
    return (
      <div className="App">
        <Choose>
          <When condition={this.state.isLoading}>
            <div>Loading...</div>
          </When>
          <Otherwise>
            <If condition={this.state.isMain}>
              <div>Header</div>
              <div>Category</div>
            </If>
            <div>Main</div>
          </Otherwise>
        </Choose>
      </div>
    );
  }
}

If, Choose, When, Otherwise 컴포넌트를 사용하여 조건문을 좀 더 쉽게 구현할 수 있습니다.

 

jsx-control-statements 패키지는 조건문 이외에도 반복문에 활용할 수 있는 For 컴포넌트를 지원합니다.

 

하지만, 아래와 같은 단점도 존재합니다.

• Babel 6에 의존
• 빌드 시간 증가
• ESLint와 함께 작동하려면 추가 플러그인이 필요