[React]조건부 렌더링

React에서 조건에 따라 로직을 처리해야 하는 코드를 작성해야 하는 경우가 존재합니다.

예전에 Route 조건부 렌더링하는 방법에 대해 간단하게 정리를 했는데요.

조건부 렌더링 하는 방법이 생각보다 다양해서 이번 기회에 조건부 렌더링을 처리하는 다양한 방법을 정리하였습니다.

---

코드

---

삼항 연산자

가장 기본적인 방법입니다.

this.state.view의 값이 true일 경우 <p>삼항 연산자</p>를 반환하며, false일 경우 null을 반환합니다.

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

    this.state = {
      view: true
    };
  }

  render() {
    return (
      <div className="App">
        {
          /* 삼항 연산자 */
          this.state.view === true ? <p>삼항 연산자</p> : null
        }
      </div>
    );
  }
}

&& 연산자

&& 연산자는 왼쪽 피연산자가 true이면, 우측의 값을 반환합니다.

왼쪽 피연산자가 false이면, null을 반환합니다.

아래 코드에서 this.state.view의 값은 true이므로 <p>&& 연산자</p>를 반환합니다.

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

    this.state = {
      view: true
    };
  }

  render() {
    return (
      <div className="App">
        {
          /* && 연산자 */
          this.state.view && <p>&& 연산자</p>
        }
      </div>
    );
  }
}

|| 연산자

|| 연산자는 왼쪽 피연산자가 0 또는 false일 경우 오른쪽 피연산자를 반환합니다.

아래 코드에서 !this.state.view는 false이므로 <p>|| 연산자</p>를 반환합니다.

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

    this.state = {
      view: true
    };
  }

  render() {
    return (
      <div className="App">
        {
          /* || 연산자 */
          !this.state.view || <p>|| 연산자</p>
        }
      </div>
    );
  }
}

null 병합 연산자

null 병합 연산자(??)는 왼쪽 피연산자가 null 또는 undefined일 경우 오른쪽 피연산자를 반환합니다.

아래 코드에서 this.state.value는 존재하지 않으므로 undefined입니다.

왼쪽 피연산자가 undefined이므로 <p>?? 연산자</p>를 반환합니다.

※ null 병합 연산자(??)는 null과 undefined만 체크합니다.

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

    this.state = {
      view: true
    };
  }

  render() {
    return (
      <div className="App">
        {
          /* ?? 연산자 */
          this.state.value ?? <p>?? 연산자</p>
        }
      </div>
    );
  }
}

함수로 처리

함수에서 조건문 로직을 처리하는 방법입니다.

조건부 로직을 처리해야 하는 코드가 클 경우 함수로 작성할 것을 권장합니다.

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

    this.state = {
      view: true,
      hTag: "h1"
    };
  }

  setHTag(param) {
    switch(param) {
      case 'h1' :
        return <h1>h1 태그입니다.</h1>;
      case 'h2':
        return <h2>h2 태그입니다.</h2>;
      case 'h3':
        return <h3>h3 태그입니다.</h3>;
      case 'h4':
        return <h4>h4 태그입니다.</h4>;
      case 'h5':
        return <h5>h5 태그입니다.</h5>;
      case 'h6':
        return <h6>h6 태그입니다.</h6>;
      default :
        return <p>default 값 입니다.</p>;
    }
  }

  render() {
    return (
      <div className="App">
        {
          /* 함수를 호출하여 처리 */
          this.setHTag(this.state.hTag)
        }
      </div>
    );
  }
}

switch 표현식

switch 표현식은 JavaScript에서 지원하는 기능입니다.

switch문과는 다르게 default 값 설정이 불가능하므로 || 연산자를 사용하여 default 값 처리를 합니다.

import React, { Component } from "react";

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

    this.state = {
      view: true,
      hTag: "h7"
    };
  }

  render() {
    return (
      <div className="App">
        {
          /* switch expression */
          {
            h1: <h1>h1 태그입니다.</h1>,
            h2: <h2>h2 태그입니다.</h2>,
            h3: <h3>h3 태그입니다.</h3>,
            h4: <h4>h4 태그입니다.</h4>,
            h5: <h5>h5 태그입니다.</h5>,
            h6: <h6>h6 태그입니다.</h6>
          }[this.state.hTag] || <p>default 값 입니다.</p>
        }
      </div>
    );
  }
}

object 변수로 선언하여 코드를 간결하게 작성할 수 있습니다.

const switchHTag = {
  h1: <h1>h1 태그입니다.</h1>,
  h2: <h2>h2 태그입니다.</h2>,
  h3: <h3>h3 태그입니다.</h3>,
  h4: <h4>h4 태그입니다.</h4>,
  h5: <h5>h5 태그입니다.</h5>,
  h6: <h6>h6 태그입니다.</h6>
};

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

    this.state = {
      view: true,
      hTag: "h1"
    };
  }

  render() {
    return (
      <div className="App">
        {
          /* switch expression */
          switchHTag[this.state.hTag] || <p>default 값 입니다.</p>
        }
      </div>
    );
  }
}

---

마무리

React에서 조건부 렌더링 처리하는 방법을 정리해보았습니다.

제가 예전에는 return문 안에 복잡한 로직을 작성했었는데, 현재는 React가 탄생하게된 배경과 함수형 패러다임에 대해 깊숙하게 공부하다보니 간단한 코드는 삼항 연산자로 처리하고 복잡한 로직은 함수를 호출하는 방식으로 개발하고 있습니다.