<React> ES6 삼항연산자란?

ES6 삼항연산자란?

• if/else와 같은 단순화된 조건 연산자

  const isLogin = true;
  const message = isLogin ? "환영합니다!" : "로그인 해주세요.";
  

   : 위 코드는 isLogin 값에 따라 message에 다른 문자열을 저장합니다.
• 조건 ? 참일 때 실행할 코드 : 거짓일 때 실행할 코드

삼항 연산자가 자주 쓰일 때는 언제일까?

• 조건이 간단할 때
• JSX 안에서 간단히 조건부 렌더링을 하고 싶을 때
• if 문보다도 짧고 직관적인 표현이 필요할 때
• 하지만 복잡한 조건이 많거나 중첩이 필요하다면 가독성을 위해 if, switch 또는 별도의 함수 분리도 고려해야 합니다.

리액트에서의 조건부 렌더링

• 리액트에서는 JSX 내부에서 조건에 따라 특정 컴포넌트나 태그를 보여줄 수 있어야 합니다.
  이때 삼항 연산자가 아주 유용합니다.
• 단순한 조건부 출력

function Greeting({ isLoggedIn }) { return ( <div> {isLoggedIn ? <h1>환영합니다!</h1> : <h1>로그인 해주세요.</h1>} </div> ); }

 

스타일과 삼항 연산자 함께 쓰기

• 조건에 따라 클래스 이름을 바꾸고 싶을 때도 삼항 연산자가 자주 쓰입니다.

function Button({ isPrimary }) { return ( <button className={isPrimary ? "btn-primary" : "btn-secondary"}> 클릭 </button> ); }

 

중첩 삼항 연산자 : 피하거나 정리하기

• 삼항 연산자를 중첩해서 쓰면 가독성이 떨어질 수 있습니다.

// 피해야 할 예
{status === 'loading' ? <p>로딩 중</p> : status === 'error' ? <p>오류 발생</p> : <p>완료</p>}

• 위와 같은 상황 시, 아래 코드처럼 미리 렌더링할 내용을 변수로 분리하면 깔끔해집니다.

// ✅ 가독성 개선
let content;
if (status === 'loading') { content = <p>로딩 중</p>; }
else if (status === 'error') { content = <p>오류 발생</p>; }
else { content = <p>완료</p>; } return <div>{content}</div>;