먼저 Inline이라는 단어는 라인(Line)의 안(In) 이라는 의미를 갖고 있습니다. 말 그대로 코드를 별도로 분리된 곳에 작성하지 않고, 해당 코드가 필요한 곳 안에 직접 집어넣는다는 뜻입니다. 그래서 Inline Conditions라고 하면 조건문을 코드 안에 집어넣는 것 이라는 뜻을 갖고 있습니다. 여기에서는 Inline If와 Inline If-Else 두 가지 조건문에 대해서 배워보도록 하겠습니다.

9.3.1 Inline If

Inline If는 if문을 필요한 곳에 직접 집어넣어서 사용하는 방법입니다. 하지만 실제로 if문을 넣는 것은 아니고, if문과 동일한 효과를 내기 위해 &&라는 논리 연산자를 사용합니다. &&연산자는 우리가 흔히 AND연산 이라고 부르는데, 양쪽에 나오는 조건문이 모두 true인 경우에만 전체 결과가 true가 됩니다. 그래서 첫 번째 조건문이 true이면 두 번째 조건문을 평가하고, 첫 번째 조건문이 false이면 어차피 전체 결과는 false가 되므로 두 번째 조건문은 평가를 하지 않습니다. 컴퓨터 프로그래밍에서는 이것을 단축 평가(Short-circuit evaluation) 라고 합니다. 결과가 정해져있는 논리연산에서 굳이 불필요한 연산은 하지 않도록 하기 위해 사용되는 방법입니다. 아래 그림은 첫 번째 조건문의 값에 따른 &&연산자의 결괏값을 나타낸 것입니다.

true && expression -> expression
false && expression -> false

조건문이 true이면, 뒤에 나오는 expression이 평가되고, 조건문이 false이면 단축 평가에 의해서 뒤에 나오는 expression은 전혀 평가되지 않습니다. 그래서 리액트에서는 조건문이 true이면 오른쪽에 나오는 element가 결괏값이 되고, false이면 false가 결괏값이 됩니다. Inline If는 이 &&연산자를 JSX 코드 안에서 중괄호를 사용하여 직접 넣어서 쓰는 방법입니다. 아래 실제 예제 코드를 보도록 하겠습니다.

function Mailbox(props) {
    const unreadMessages = props.unreadMessages;

    return (
        <div>
            <h1>안녕하세요!</h1>
            {unreadMessages.length > 0 &&
                <h2>
                    현재 {unreadMessages.length}개의 읽지 않은 메시지가 있습니다.
                </h2>
            }
        </div>
    );
}

위 코드를 보면 조건문 unreadMessages.length > 0의 값에 따라서 뒤에 나오는 <h2>태그로 둘러싸인 부분이 렌더링이 되거나 안되거나 하게 됩니다. &&연산자를 사용하는 이러한 패턴은 단순하지만 리액트에서 굉장히 많이 사용되는 패턴이기 때문에 꼭 기억해두길 바랍니다.

한 가지 &&연산자를 사용할 때 주의해야 할 점은, 조건문에 Falsy expression을 사용하면 뒤에 나오는 expression은 평가되지 않지만 Falsy expression의 결괏값이 그대로 리턴되기 때문에 주의해야 한다는 점입니다. 예를 들어 아래 코드의 결과는 화면에 아무것도 안 나오는 것이 아니라, count의 값인 0이 들어가서 <div>0</div>가 됩니다.

function Counter(props) {
    const count = 0;

    return (
        <div>
            {count && <h1>현재 카운트: {count}</h1>}
        </div>
    );
}

9.3.2 Inline If-Else

Inline If-Else는 If-Else문을 필요한 곳에 직접 넣어서 사용하는 방법입니다. Inline If의 경우 보여주거나 안 보여주는 두 가지 경우만 있었지만, Inline If-Else는 조건문의 값에 따라서 다른 element를 보여줄 때 사용합니다. 그리고 이를 위해서 흔히 삼항 연산자라고 부르는 ?연산자를 사용합니다. ?연산자의 경우 앞에 나오는 조건문이 true이면 첫 번째 항목을 리턴하고, false이면 두 번째 항목을 리턴합니다. 이렇게 총 세 개의 항이 있기 때문에 삼항 연산자라고 부르는 것입니다. 아래 그림은 삼항 연산자의 작동방식을 나타낸 것입니다.

조건문 ? 참일 경우 : 거짓일 경우

그리고 실제로 리액트에서 사용하는 형태는 아래와 같습니다.

function UserStatus(props) {
    return (
        <div>
            이 사용자는 현재 <b>{props.isLoggedIn ? '로그인' : '로그인 하지 않은'}</b> 상태입니다.
        </div>
    )
}

위 코드에서 Inline If-Else를 사용한 부분을 보면, isLoggedIn의 값이 true인 경우에는 '로그인'이라는 문자열을 출력하고, false인 경우에는 '로그인 하지 않은'이라는 문자열을 출력하게 됩니다. 그리고 아래 코드처럼 문자열이 아닌 element를 넣어서 사용할 수도 있습니다.

function LoginControl(props) {
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    const handleLoginClick = () => {
        setIsLoggedIn(true);
    }

    const handleLogoutClick = () => {
        setIsLoggedIn(false);
    }

    return (
        <div>
            <Greeting isLoggedIn={isLoggedIn} />
            {isLoggedIn
                ? <LogoutButton onClick={handleLogoutClick} />
                : <LoginButton onClick={handleLoginClick} />
            }
        </div>
    )
}

여기서는 isLoggedIn의 값이 true인 경우에는 LogoutButton를 출력하고, false인 경우에는 LoginButton을 출력하게 됩니다. 이처럼 Inline If-Else는 조건에 따라 각기 다른 element를 렌더링하고 싶을 때 사용합니다.