삼항 연산자와 논리 연산자

2_현주·2024년 5월 24일

스터디

목록 보기

4/7

2024.05.24 5차 스터디

오늘의 스터디 주제는? 삼항 연산자와 논리 연산자!

지난번 스터디 할 때 화살표 함수의 이해가 어려워서 조금 정리한 뒤 남은 부분을 삼항연산자로 정리하였었다. 이번에 화살표 함수에 대한 기록 작성을 끝내고 나니 내용이 길어져서ㅋㅋ,,, 삼항연산자는 논리 연산자와 함께 기록하려고 한다!

1. 삼항 연산자

삼항 연산자는 자바스크립트에서 조건에 따라 값을 선택할 때 사용하는 간단한 조건문입니다. 삼항 연산자는 세 개의 피연산자를 가지며, 그래서 '삼항'이라고 부릅니다. 일반적으로 if-else 문을 대체할 수 있는 간단한 방법으로 사용됩니다.

1-1. 삼항 연산자의 문법

A ? B : C

A : 평가될 조건을 나타내는 표현식입니다. 이 조건이 참(true)이면 B, 거짓(false)이면 C가 평가됩니다.
B : 조건이 참일 때 반환될 표현식입니다.
C : 조건이 거짓일 때 반환될 표현식입니다.

삼항 연산자를 사용한 간단한 예시입니다.

const x = 10;

const result = x > 5 ? '크다' : '작거나 같다';
console.log(result); // 출력 : 크다

위의 코드에서 x > 5는 참이기 때문에 '크다'가 결과로 반환됩니다.

1-2. 삼항연산자의 장점

1. 간결함 : if-else 문보다 짧고 읽기 쉽습니다.

삼항 연산자는 if-else 문에 비해 훨씬 짧고 간결하게 조건문을 작성할 수 있습니다. 이는 코드 라인을 줄이고, 코드의 전반적인 길이를 감소시켜 줍니다.

2. 가독성 : 간단한 조건문을 사용할 때 가독성이 좋습니다.

삼항 연산자는 짧고 간결한 조건문을 표현할 때 특히 가독성이 좋습니다. 코드가 더 직관적으로 보이며, 한눈에 조건과 그에 따른 결과를 이해할 수 있습니다.

3. JSX에서의 활용 : 조건부 렌더링을 간결하게 표현할 수 있습니다.

리액트(JSX) 같은 라이브러리에서는 삼항 연산자가 조건부 렌더링에 자주 사용됩니다. 이는 UI를 조건에 따라 다르게 표시할 때 매우 편리합니다.

const user = { isLoggedIn: true };

const greeting = (
  <div>
    {user.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}
  </div>
);

이처럼 삼항 연산자는 간단한 조건문을 작성할 때 유용한 도구입니다. 하지만 너무 복잡한 논리를 삼항 연산자로 표현하면 오히려 가독성이 떨어질 수 있으므로, 상황에 따라 if-else 문을 사용하는 것이 더 나을 때도 있습니다. 적절한 상황에서 삼항 연산자를 사용하면 코드의 가독성과 간결성을 높일 수 있습니다.

2. 논리연산자

자바스크립트의 논리 연산자를 활용한 조건문을 간결하게 작성하는 방법입니다. 논리 연산자는 불린(boolean) 값과 함께 사용되며, 주로 조건을 결합하고 표현식을 평가하는 데 사용됩니다. 주로 && (AND), || (OR), ! (NOT) 연산자가 있습니다.

2-1. AND 연산자 (&&)

&&의 왼쪽 조건이 참일 때 &&의 오른쪽 부분을 반환합니다. 이를 활용하여 조건이 참일 때만 오른쪽에 있는 표현식이 실행되도록 할 수 있습니다.

&& 연산자를 사용하는 조건부 렌더링

import React from 'react';

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn && <h1>Welcome back!</h1>}
      {!isLoggedIn && <h1>Please sign in.</h1>}
    </div>
  );
}

export default Greeting;

위 예시는 Greeting 컴포넌트에서 isLoggedIn 객체를 받아서, 로그인 여부를 표시합니다.
isLoggedIn이 true 일 때는 <h1>Welcome back!</h1>, false 일 때는 <h1>Please sign in.</h1>이 렌더링 됩니다.

2-2. OR 연산자 (||)

연산자는 왼쪽 조건이 거짓일 때 오른쪽 부분을 반환합니다. 이를 활용하여 기본값을 설정할 수 있습니다.

|| 연산자를 사용하는 기본값 설정

import React from 'react';

function UserProfile({ user }) {
  const displayName = user.name || "Guest";
  
  return (
    <div>
      <h1>Welcome, {displayName}!</h1>
    </div>
  );
}

export default UserProfile;

위 예시는 UserProfile 컴포넌트에서 user 객체를 받아서, 해당 유저의 이름을 표시합니다.
만약 user.name이 존재하지 않는다면 즉, || 의 왼쪽 조건이 거짓일 때 "Guest"라는 기본값이 변수 displayName에 할당되어 <h1>Welcome, Guest!</h1>이 렌더링 됩니다.

이렇게 함으로써, UserProfile 컴포넌트는 유저 객체에 이름이 포함되어 있지 않더라도 오류 없이 렌더링될 수 있습니다. 이는 리액트에서 매우 유용한 패턴 중 하나입니다.