React - 조건부 랜더링

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서는 React 에서의 조건부 랜더링을 알아보도록 하겠습니다.

기존의 제 프로젝트나, 작성에서는 Nunjucks 를 이용하여, If 문등을 사용하여 작성했습니다.

 

React 역시도 기본적으로는 If 나 조건부 연산자 등을 이용해서 작성을 하게 됩니다.

이를 자세하게 살펴보도록 하겠습니다.

 

============

1. 기본적인 If 문을 사용하여 작성하기

2. 논리 && 연산자 및 삼항연산자 사용하기

3. 컴포넌트가 랜더링하는 것을 방지하기

============

 

1. 기본적인 If 문을 사용하여 작성하기

class Test extends React.Component {
  render() {
    const isLoggedIn = this.props.isLoggedIn
    if (isLoggedIn) {
      return <h1>Hynn Tistory Blog</h1>
    } else {
      return <h1>Welcome to My Tistory Blog</h1>
    }
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Test isLoggedIn={true} />)

 

예제를 먼저 적용해서 살펴보도록 하겠습니다.

먼저 Test 라는 Class Component 를 생성했습니다. 

이 컴포넌트는 예시를 위해 Constructor 와 같은 method 를 사용하지 않고 바로 render method 를 이용하여 작성을 하였습니다.

 

그리고 render 에는 먼저, isLoggedIn 이라는 변수를 생성하고, 변수에는 "this.props.isLoggedIn" 을 담습니다.

물론, 일반적으로는 constructor 에서 state 나 props 안에 담는게 좋지만, 예시를 위해 간단하게 작성했으므로, 이는 감안하시면 좋습니다. 만약 constructor 를 이용해 작성하면 아래와 같이도 작성할 수 있으니, 예제 코드를 비교해보시는 것도 좋겠습니다.

 

class Test extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isLoggedIn: props.isLoggedIn
    }
  }

  render() {
    if (this.state.isLoggedIn) {
      return <h1>Hynn Tistory Blog</h1>
    } else {
      return <h1>Welcome to My Tistory Blog</h1>
    }
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Test isLoggedIn={true} />)

이렇게 할 경우, isLoggedIn 이 true 일 경우에는 "Hynn Tistory Blog"를, false 일 경우, "Welcome to My Tistory Blog"를 출력하게 됩니다. 

위의 코드가 바로 조건부 랜더링의 기초적인 사항이라고 할 수 있습니다.

 

이를 응용해서 몇가지 작성해보도록 하겠습니다.

 

2. 논리 && 연산자 및 삼항연산자 사용하기

 

논리 && 연산자와 삼항연산자를 사용하면 위의 코드를 조금 더 간결하고, 직관적으로 작성할 수 있습니다.

실제 JavaScript 에서도 If / Else 만으로 표현하는 것 보다, 논리 연산자와 삼항연산자를 이용해 작성하면 보다 효과적인 작성이 가능했습니다.

React 에서도 JSX 문법에서 이를 추가하여 조건부 랜더링을 하게 되면, 직관적으로 코드 작성이 가능합니다.

각각의 예제를 살펴보도록 하겠습니다.

 

1) 논리연산자 (&&)

class Test extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isLoggedIn: props.isLoggedIn,
    }
  }

  render() {
    return (
      <div>
        {this.state.isLoggedIn && <h1>Hynn Tistory Blog</h1>}
        {!this.state.isLoggedIn && <h1>Welcome to My Tistory Blog</h1>}
      </div>
    )
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Test isLoggedIn={true} />)

 

2) 삼항연산자 

class Test extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isLoggedIn: props.isLoggedIn,
    }
  }

  render() {
    return (
      <div>
        {this.state.isLoggedIn ? (<h1>Hynn Tistory Blog</h1>) : (<h1>Welcome to My Tistory Blog</h1>)}
      </div>
    )
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Test isLoggedIn={true} />)

위 코드들의 결과물은 모두 같지만 작성이 다를 뿐입니다.

즉, isLoggedIn 이 true 일 경우, "Hynn Tistory Blog" 가 출력되고, isLoggedIn이 false 일 경우에는 "Welcome to My Tistory Blog" 가 출력되도록 설정되어 있습니다.

 

하지만 IF 문을 이용하면, 그에 맞는 엘리먼트 랜더링을 할 수도 있습니다.

이를 살펴보도록 하겠습니다.

 

3. 컴포넌트가 랜더링하는 것을 방지하기

 

이를 위해서는 Props 와 State 를 적절히 활용해야 하겠습니다.

바로, Props 의 값을 이용해 null 일 경우 엘리먼트가 랜더링이 되지 않도록 작성할 수도 있습니다.

class Test extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isLoggedIn: props && props.isLoggedIn,
    }
  }

  render() {
    if (!this.state.isLoggedIn) {
      return null
    }

    return (
      <div>
        {this.state.isLoggedIn ? (<h1>Hynn Tistory Blog</h1>) : (<h1>Welcome to My Tistory Blog</h1>)}
      </div>
    )
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Test isLoggedIn={true} />)

기존의 삼항연산자를 사용한 코드에서 If 문을 추가하여, 아래의 조건을 설정하여 작성했습니다.

위 예제에서는 Props 가 null 인지를 확인하고, null 일 경우, "props.isLoggedIn" 은 undefined, 즉 null 로 처리가 되므로, "this.state.LoggedIn"이 false 로 설정됩니다.

 

따라서, Render method 에서는 false 일 경우, 더 이상 랜더링 하지 않도록 null 을 반환하는 코드가 완성됩니다.

 

If 문을 사용하여 조건부 랜더링에 대한 코드 작성의 예제를 알아보았습니다.

다음 포스팅에서는 If 문 뿐 아니라, JavaScript 의 배열등을 이용해 랜더링을 보다 다양하게 작성하는 방법을 알아보도록 하겠습니다.

 

감사합니다.