[JavaScript] 논리 연산자 &&와 ??

자바스크립트 꿀팁: 논리 연산자 &&와 ??

리액트에서 조건부 렌더링을 구현할 때, 불필요한 if문 대신 코드의 가독성을 높여주는 논리 연산자 기법임

키워드: Short-circuit evaluation(단락 평가), Nullish Coalescing(널 병합 연산자), props.children
핵심: 문지기(&&)와 대타(??)를 활용한 조건부 렌더링.

---

&& 연산자: "앞이 진짜일 때만 뒤를 보여줘 (문지기)"

왼쪽 조건이 true일 때만 오른쪽 값을 반환한다. 리액트에서 특정 조건이 만족될 때만 UI를 보여주고 싶을 때 가장 많이 쓰인다.

❖ 작동 규칙:

• true && <Component />: 컴포넌트가 나타남.
• false && <Component />: 아무것도 나타나지 않음.
• 주의! 0 && <div>...</div>라고 쓰면 화면에 숫자 0이 출력된다. (0은 자바스크립트에서 유효한 숫자이므로 리액트가 그대로 렌더링함)

---

?? 연산자: "데이터가 없으면 대타를 투입해 (대타)"

왼쪽 값이 null이거나 undefined일 때만 오른쪽 값을 반환한다. 데이터가 아직 로딩되지 않았거나 값이 비어있을 때 기본값을 보여주기 위해 사용한다.

❖ 작동 규칙:

• data ?? '기본값': data가 있으면 data를, 없으면 '기본값'을 사용.
• || 연산자와의 차이: ||는 0이나 ""(빈 문자열)도 거짓(falsy)으로 보고 대타를 투입하지만, ??는 오직 진짜 데이터가 없을 때(null, undefined)만 대타를 투입한다.

&&는 존재할 때만 보여주는 '필터'이고, ??는 비어있을 때 채워주는 '안전장치'다.

---

### 논리 연산자 활용 프로세스

1. && 활용: 사용자가 로그인 상태인지(isLoggedIn) 확인하여 메뉴 버튼을 노출함
2. ?? 활용: 서버에서 받아온 닉네임이 없으면 "익명 사용자"라는 텍스트를 대신 띄움
3. 결합: isLoading && (data ?? 'Default Value') 형태로 사용하여 로딩 중일 때와 데이터가 없을 때를 동시에 제어함

---

### 실전 예시: props.children과 조건부 렌더링

function Modal({ children, title }) {
  return (
    <div className="modal">
      {/* title이 있을 때만 h2 태그를 생성하는 문지기 */}
      {title && <h2>{title}</h2>}
      
      {/* children이 없으면 안내 문구를 띄우는 대타 */}
      <div>{children ?? <p>내용이 비어있습니다.</p>}</div>
    </div>
  );
}