[Javascript] && 연산자의 또 다른 능력

고수들의 리액트 코드를 보아하니 일명 "그리고"의 의미를 가진 &&연산자를 다르게 사용하고 특이하고 사용하고 있는 것을 목격했다.

그래서 &&연산자에 대해 더 알아보기로 했다. 다음과 같은 예제를 한번 보자.

Q. b의 값은 무엇이며, && 우변이 왜 저렇게 될까?

const a = 3;
let b = 0;

a === 3 && (b = 2);

console.log(b);

A. b의 값은 2이다.

조건문 안에 "그리고"라는 의미를 가진 &&연산자가 내가 모르던 방식으로 사용하고 있었다.
JavaScript, React에서 값을 결정하거나 조건부 렌더링을 하는 등 다양한 상황에서 활용될 수 있다.

컴포넌트 조건부 렌더링을 하는 경우 return ( ... ) 부분 코드를

import React, { useState } from "react";

export default function App() {
  const [bool, setBool] = useState(false);
  console.log("Render!")

  const onClick = () => {
    bool === true ? setBool(false) : setBool(true);
  };

  return (
    <div>
      <button onClick={onClick}>Click</button>
      {
        bool === true ? (
          <div>Bool is true</div>
        ) : null
      }
    </div>
  )
}

다음과 같이 바꿀 수 있다.

import React, { useState } from "react";

export default function App() {
  const [bool, setBool] = useState(false);
  console.log("Render!")

  const onClick = () => {
    bool === true ? setBool(false) : setBool(true);
  };

  return (
    <div>
      <button onClick={onClick}>Click</button>
      {
        bool === true && (
          <div>Bool is true</div>
        )
      }
    </div>
  )
}

코드에 :null을 제외시킬 수 있어 가독성을 개선할 수 있다.