자바스크립트, 리액트 공부하기 - 논리연산자 복습 ✨

논리연산자 복습 해봅시다 - 🧚‍♀️

이번엔 리액트에서 조건부 렌더링 시, 자주 쓰이는 것 위주로 리뷰 해보는 시간 입니다.

---

1. && (AND 연산자)

조건이 true일 때만 렌더링할 때 사용해.

JSX 안에서 가장 많이 쓰이는 방식 중 하나야.

 

{isLoggedIn && <p>Welcome back!</p>}

→ isLoggedIn이 true일 때만 <p>가 렌더링됨.

 

 

2. || (OR 연산자)

첫 번째 값이 falsy이면 두 번째 값을 반환해.

디폴트 값을 설정할 때 유용해.

 

const name = userName || "Guest";

→ userName이 없으면 "Guest"를 사용.

 

 

3. 삼항 연산자 condition ? expr1 : expr2

가장 흔한 조건부 렌더링 방식 중 하나.

if-else 대신 JSX 안에서 쓰기에 좋아.

 

{isDarkMode ? <DarkTheme /> : <LightTheme />}

 

 

4. ?? (Null 병합 연산자, nullish coalescing)

null이나 undefined일 때만 기본값을 제공해.

||보다 정확한 디폴트 값 설정이 가능해.

const userName = inputName ?? "Anonymous";

→ inputName이 null 또는 undefined일 때만 "Anonymous" 사용.