React에서 조건에 따라 엘리먼트, 컴포넌트를 숨기거나 나타나게 하는 Conditional Rendering에 대하여 알아봅니다.



# React 조건에 따라 엘리먼트 및 컴포넌트 숨기기, 보여주기
항상이 아닌 특정 조건에 맞는 경우에만 컴포넌트나 엘리먼트를 숨기고 보여줘야 할 경우가 있습니다. 예를들어 ajax로 새로운 데이터를 불러와 렌더링 할 경우 현재 로딩 중이라는 Spinner 컴포넌트를 출력해야 한다고 생각해봅니다.
로딩 중 - Spinner 컴포넌트 보여주기
로딩 후 - Spinner 컴포넌트 감추기
물론 로딩이 끝나면 Spinner를 다시 안보이도록 변경해야합니다. 이럴 때 사용하는 방법이 바로 조건에 따른 렌더링 방식입니다. 조건이 true / false에 따라 숨기고 보여주는 방법은 css의 스타일을 사용하거나 아니면 {} 내부에 조건식을 사용할 수 있습니다.

{} 조건문을 사용하는 방법


css를 사용하는 방법도 좋지만 브라우저에 렌더링을 안 하는 부분이 큰 차이입니다. 렌더링을 할 필요가 없다면 안 하는 것이 성능 측면에서 더 나은 방법입니다.

그렇다면 조건에 따른 렌더링을 구현하려면 어떻게 할까요? 아래에서 예제를 하나 만들고 알아봅니다.


! React에서 Conditional Rendering 구현하기
앞에 언급한 것처럼 동일한 예제를 만들어봅니다. 바로 ajax로 호출한 뒤에 Spinner를 보여주고 로딩이 끝나면 Spinner를 감추는 간단한 예제입니다.


먼저 이 예제를 구현하기 위해 가장 중요한 부분은 react앱 render() 함수의 리턴으로 { 조건문 }을 사용해야 한다는 점입니다. 방법은 간단합니다. 아래의 소스 코드를 봐주세요.
import Spinner from './Spinner.jsx';

export default () => {
  render() {
    return (
      { true ? <Spinner /> : null }
    )
  }
}

위의 함수형 컴폰넌트의 코드를 살펴보면 아래의 순서대로 동작하게 됩니다.

- ./Spinner.jsx 컴포넌트를 가져오기
- 조건이 true이므로 Spinner 컴포넌트를 출력하기

만약 true가 아니었다면 null 값을 반환하므로 당연히 출력하지 않게 됩니다. 추가로 위 코드의 조건식은 아래와 같이 바꾸어 사용할 수도 있습니다.


! React && 기호를 사용하여 렌더링 방법
이 방법은 위의 방법과 거의 비슷하지만 false인 경우에는 아무것도 실행할 필요가 없죠. 그래서 &&를 사용하면 더 간단하게 바꿀 수 있습니다. 먼저 코드부터 살펴보겠습니다.
// 기존 코드
return (
  { true ? <Spinner /> : null }
)

// 수정 후 코드
return (
  { true && <Spinner /> }
)

두 코드의 차이점이 보이시나요? false인 경우 아무것도 실행하지 않습니다.



# react, state를 사용하여 Conditional Render 구현하기
View를 다이나믹하게 바꾸기 위해 컴포넌트 내부의 state를 사용할 수 있습니다. 아래는 isLoading 이름의 상태값을 저장하고 이 값에 따라 Spinner 컴포넌트를 감추고 보여주는 코드를 작성하였습니다.
class myApp extends React.Component {
  constructor(props) {
    this.state = {
      isLoading: false
    }
  }

  render() {
    const { isLoading } = this.state;
    return (
      <div>
        { isLoading &&
          <Spinner /> }
      </div>
    )
  }
}

이제 상태값 isLoading에 따라 바뀌게 되는 코드가 완성 되었습니다.


여기까지 React에서 조건에 따라 렌더링을 수행하는 방법에 대하여 간단하게 알아봤습니다. 참고로 React는 다른 프론트엔드의 *ngIf, v-if와 같은 결과를 얻기 위해 위와 같은 방법을 사용합니다.