Ternary 연산자로 자바스크립트에서의 컴포넌트 조건부 렌더링

08 Nov 2023

javascript

자바스크립트를 사용하여 웹 애플리케이션을 개발할 때, 종종 조건에 따라 컴포넌트를 동적으로 렌더링해야 할 때가 있습니다. 이런 상황에서 Ternary 연산자는 매우 유용합니다. Ternary 연산자는 if-else 문을 간결하게 표현할 수 있는 방법으로, 조건문에 따라 다른 결과를 반환하는 문법입니다.

Ternary 연산자의 구조

Ternary 연산자는 다음과 같은 구조를 가지고 있습니다.

condition ? expression1 : expression2

condition: 참 또는 거짓을 평가하는 조건식입니다.
expression1: condition이 참일 경우, 반환할 값 또는 수행할 동작입니다.
expression2: condition이 거짓일 경우, 반환할 값 또는 수행할 동작입니다.

컴포넌트 조건부 렌더링 예시

다음은 Ternary 연산자를 사용하여 자바스크립트로 컴포넌트를 조건부로 렌더링하는 예시입니다.

import React from 'react';

const Component = ({ isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome, User!</h1>
      ) : (
        <button>Login</button>
      )}
    </div>
  );
}

export default Component;

위 코드에서 isLoggedIn이 참일 경우에는 환영 메시지를, 거짓일 경우에는 로그인 버튼을 렌더링합니다. Ternary 연산자를 사용하면 if-else 문을 사용하는 것보다 간결하게 코드를 작성할 수 있습니다.

결론

Ternary 연산자는 자바스크립트로 컴포넌트 조건부 렌더링을 수행할 때 유용한 도구입니다. if-else 문을 사용하는 것보다 코드를 더 간결하고 가독성있게 작성할 수 있습니다. 효율적인 조건부 렌더링을 위해 Ternary 연산자를 활용해 보세요!

References

#javascript #react