&& 연산자에 대한 간단한 고찰

오늘은 자바스크립트의 AND(&&) 연산자의 동작 방식에 대해 간단히 정리해보려 합니다.

시작하기 전에, 한번 간단한 OX 퀴즈를 풀어 볼까요?

"&& 연산자는 조건을 검사하고, 해당 조건이 참일 때 다음에 오는 식을 실행합니다." (O / X)

조건문 && (조건이 참일 경우) 실행할 식

이런걸 퀴즈로 냈다는건 분명 어딘가 틀렸다는 건데, 과연 어디서 틀린 걸까요?

&& 연산자와 조건부 렌더링

리액트에서는 컴포넌트의 조건부 렌더링을 위해 && 연산자를 사용할 때가 종종 있습니다.

const menuList = ["홈", "주문 내역", "결제 정보"]

const Menu = () => {
  return (
    <>
      {/* menuList.length는 0이 아니므로 참이 됩니다. */}
      {menuList?.length && (
        <MenuList menuList={menuList} />
      )}
    </>
  );
}

const MenuList = ({ menuList }) => {
  return (
    <>
      {menuList.map(menu => <MenuItem>{menu}</MenuItem>)}
    </>
  )
}

const MenuItem = ({ children }) => {
  return (
    <div style={{ padding: "1rem 2rem", border: "1px solid #cdcdcd" }}>
      {children}
    </div>
  )
}

export default Menu;

자, 즐거운 두 번째 퀴즈입니다! 위의 코드는 과연 의도한 대로 동작할까요?

잘 동작하는 것처럼 보이네요! 하지만 과연 그럴까요?

이 코드는 menuList 배열이 비어있지 않을 때는 <MenuList> 컴포넌트를 제대로 보여주겠지만, 배열이 없거나 비어 있을때는 의도치 않은 결과를 보여주게 됩니다.

// menuList를 빈 배열로 변경했습니다.
const menuList = []

const Menu = () => {
  return (
    <>
      {menuList?.length && (
        <MenuList menuList={menuList} />
      )}
    </>
  );
}

// ... 나머지 부분은 이전과 동일합니다.

우리가 원한 동작은 && 연산자를 사용해 식의 평가 결과가 참일 때는 <MenuList> 를 보여주고, 거짓일 때는 아무것도 보여주지 않는 것이었는데요, 거짓값을 전달하니 갑자기 0이라는 숫자가 화면에 출력되는 모습입니다.

&&의 동작 원리

코드도 살펴봤으니, 왜 이런 일이 발생한 건지 알아보기로 합시다.

"&& 연산자는 조건을 검사하고, 해당 조건이 참일 때 다음에 오는 식을 실행합니다." (❌)

=> "&& 연산자는 두 값을 차례로 검사해 falsy한 값을 반환하거나, 모든 값이 true일 경우에는 마지막으로 평가된 값을 반환합니다. (✅) 

처음 보았던 이 퀴즈가 틀린 이유는, 바로 && 연산자의 엄밀한 동작 방식은 첫 번째로 만나는 거짓값을 그대로 반환하기 때문입니다.

즉, 위의 리액트 예제에서 의도하지 않은 0이 출력된 이유도 여기에 있습니다.

const menuList = []

const Menu = () => {
  return (
    <>
      {/* menuList.length는 0으로 falsy한 값입니다. */}
      {/* 따라서, && 연산자는 0이라는 텍스트 노드를 리턴해, 화면에 0이 렌더링되게 됩니다. */}
      {menuList?.length && (
        <MenuList menuList={menuList} />
      )}
    </>
  );
}

&&의 늪에 빠지지 않으려면?

이렇게 조건부 렌더링 로직을 위해 &&을 잘못 사용하면 의도하지 않은 결과물이 나올 수 있는 위험이 있습니다.

특히 빈 문자열이나 0 등의 falsy한 값을 잘못 활용하면 이는 실제 렌더링 결과물에 영향을 미칠 수도 있으므로, 조건부 렌더링을 평가하는 조건문이 거짓일 때는 반드시 false 또는 null 값을 반환하도록 해야 합니다.

const menuList = []

const Menu = () => {
  return (
    <>
      {/* 이제 && 연산자는 MenuList 또는 false를 리턴하므로,
      menuList가 false일 때 정상적으로 빈 화면만을 보여주게 됩니다. */}
      {menuList?.length === 0 && (
        <MenuList menuList={menuList} />
      )}
    </>
  );
}

논리 연산자에 대한 더 자세한 설명이 궁금하다면, 모던 자바스크립트 튜토리얼 문서를 참고해 보세요! 😆