리액트에서 인라인 조건이란?

 

인라인 조건(inline conditional)

인라인은 라인 안 의미 그대로 해당 코드가 필요한곳 안에 직접 작성한 코드를 말한다.

즉 조건문을 따로 분리하지 않고 JSX 내부에서 바로 작성하는 것이 인라인 조건의 본질이다.

 

아래는 자주 사용되는 인라인 조건 작성 방식과 사용법이다.

 

1. 삼항 연산자

조건 ? 참일 때 렌더링 : 거짓일 때 렌더링

 

function Example({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
    </div>
  );
}

 

 

2. && 논리 연산자

조건이 참일 때만 특정 요소를 렌더링

조건 && 렌더링할 요소

 

function Example({ hasNotifications }) {
  return (
    <div>
      <h1>Dashboard</h1>
      {hasNotifications && <p>You have new notifications!</p>}
    </div>
  );
}

 

 

3. || 논리 연산자

조건이 false일 경우 대체값을 렌더링함

조건 || 대체값

 

function Example({ username }) {
  return (
    <div>
      <p>Hello, {username || 'Guest'}!</p>
    </div>
  );
}

username이 빈 문자열(""), null, nudefined 또는 false일 경우 guest가 표시 된다.

 

 

4. 즉시 실행 함수 (IIFE)와 조건

조건이 복잡한 경우, 명확하게 여러 조건을 처리할 수 있다.

function Example({ status }) {
  return (
    <div>
      {(() => {
        if (status === 'loading') return <p>Loading...</p>;
        if (status === 'error') return <p>Error occurred!</p>;
        return <p>Data loaded successfully.</p>;
      })()}
    </div>
  );
}

 

 

주의사항

1. 불필요한 계산 최소화

JSX내부에서 복잡한 연산이나 함수 호출을 피하도록 한다. 이를 위해 조건을 변수에 저장하거나 별도 함수로 분리하는 것이 좋다.

 

2. 조건의 값 확인

0, 빈 문자열(""), false, undefined, null등 falsy값은 렌더링 결과에 영향을 줄 수 있으므로 처리에 주의 한다.

 

3. && 연산자의 함정

0과 같은 값도 false로 평가되어 렌더링되지 않는다. 이런 상황에서는 삼함 연산자를 사용하는 것이 안전하다.

{0 && <p>Result</p>} // 0은 false로 평가 아무것도 렌더링되지 않음
{0 ? <p>Result</p> : <p>No Result</p>} // 0은 false로 평가 되지만 대체값 "No Result" 렌더링

 

 

 

 

 

리액트의 인라인 조건을 활용하면 코드가 간결해지지만, 가독성을 유지하기 위해 조건이 복잡해지면 별도의 함수나 컴포넌트로 분리하는 것도 좋은 방법이다.