[09AUG, 2021] TIL

요즘 노션에 빠져서 블로깅을 잘 안 하게 되는데 그래도 노션과 블로그는 느낌이 다르고 블로깅을 할 때 좀 더 깊게 공부하게 돼서 틈틈이 TIL이라도 열심히 쓰려고 노력해야겠다!! 

 

---

 

✔️ ?? (Nullish coalescing operator, null 병합 연산자)

오늘 유튜브를 보다 ?? 라는 null 병합 연산자를 알게 되었다. 

leftExpr ?? rightExpr

 

이렇게 표현하며, 왼쪽 피연산자가 null 또는 undefined (Nullish한 값) 일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다. 예제를 보면 더 쉽게 이해할 수 있다. 

 

function printMessage (text) {
	const message = text ?? 'Nothing to display';
	console.log(message);
}

PringMessage('Hello'); //'Hello'
PringMessage(undefined); //'Nothing to display'
PringMessage(null); //'Nothing to display'

 

그럼 || (OR연산자)링은 무엇이 다를까? OR연산자는 null이나 undefined뿐 아니라 falsy한 값에 해당할 경우 오른쪽 피연산자를 반환한다는 차이가 있다.

 

 

✔️ react 조건부 렌더링 &&

삼항연산자를 주로 사용하다 논리 연산자 '&&'를 사용하는 방법도 있다는 것이 생각나서 다시 한번 공식문서를 읽으면서 사용해봤다. 조건이 true일 경우에는 && 이후에 위치한 expression을 반환하고, false일 경우 expression을 반환하지 않고 무시한다. 아래는 리액트 공식문서의 예제이다. 

 

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

 

이 코드가 실행되면 아래와 같은 결과를 보여준다.

 

조건? true : false를 표현할 수 있는 삼항연산자와 위에서 본 논리 연산자를 그때그때 필요하고, 가독성 좋은 것으로 선택해서 사용하면 좋을 것 같다.