JS_논리연산자 / 옵셔널체이닝

💡 논리 연산자(AND &&, OR ||)와 옵셔널 체이닝(?.)의 차이점

둘 다 안전하게 데이터에 접근하거나 조건부 로직을 처리할 때 사용되지만, 역할과 사용법이 다르다는 게 핵심.

---

1️⃣ 논리 연산자 (AND &&, OR ||)

📌 AND (&&) - 앞의 값이 true일 때만 뒤의 값 반환

const user = { name: "Alice" };
console.log(user && user.name);  // ✅ "Alice"

• user가 존재하면 user.name을 반환
• 만약 user가 null이나 undefined라면 오류 없이 null 반환

🚩 실패 사례 (중첩된 객체)

const user = null;
console.log(user && user.profile.name);  // ❌ TypeError 발생!

• user가 null이기 때문에 user.profile에 접근하면 오류 발생
• 중첩된 객체에서는 안전하지 않음

---

📌 OR (||) - 앞의 값이 false면 뒤의 값 반환 (기본값 설정할 때 사용)

const name = "" || "Default Name";  // ✅ "Default Name"

• 빈 문자열("")은 falsy 값이므로 "Default Name" 반환
• null, undefined, 0, false, NaN, "" 같은 falsy 값이 앞에 있으면 뒤의 값으로 대체됨

---

2️⃣ 옵셔널 체이닝 (?.)

📌 안전하게 깊은 객체에 접근할 수 있는 문법

const user = { profile: { name: "Alice" } };
console.log(user?.profile?.name);  // ✅ "Alice"

• user와 user.profile이 존재할 경우에만 name에 접근
• 중간에 null이나 undefined가 있어도 오류 없이 undefined 반환

🚩 실패 사례 (옵셔널 체이닝 없이)

const user = null;
console.log(user.profile.name);  // ❌ TypeError: Cannot read properties of null

• user가 null이면 profile에 접근하려고 할 때 에러 발생
• 옵셔널 체이닝(?.)을 사용하면 이 문제를 방지할 수 있음

console.log(user?.profile?.name);  // ✅ undefined (에러 없이 처리됨)

---

3️⃣ 차이점 한눈에 비교

🚀 기능	✅ **논리 연산자 (&&, `
목적	조건부 렌더링, 기본값 설정	안전한 객체/배열 접근
사용 상황	값이 존재하는지 확인하고 다음 로직 실행	중첩된 객체 속성을 안전하게 탐색할 때
에러 발생 여부	중간 값이 null이면 오류 발생 가능	null이나 undefined일 경우에도 에러 발생 안 함
문법	user && user.name	user?.name
기본값 설정 가능 여부	OR(`

---

📢 실무에서의 사용 예제

1️⃣ 조건부 렌더링 (논리 연산자 활용)

const isLoggedIn = true;
return (
  <div>
    {isLoggedIn && <p>Welcome, User!</p>}  // ✅ 로그인 상태일 때만 표시
  </div>
);

• isLoggedIn이 true일 때만 <p> 태그가 렌더링됨

---

2️⃣ 안전한 데이터 접근 (옵셔널 체이닝 활용)

const user = null;
console.log(user?.profile?.name);  // ✅ undefined (에러 없이 처리)

• user가 null이어도 에러 발생 없이 undefined 반환
• API 응답 처리나 불확실한 데이터 구조에서 유용

---

📍 정리: 언제 어떤 걸 써야 할까?

상황	추천 문법
조건부 렌더링	✅ && 사용 (e.g., isLoggedIn && <Component />)
기본값 설정	✅ `
깊은 객체 접근 (안전성 중요)	✅ ?.(옵셔널 체이닝) 사용
불확실한 API 데이터 처리	✅ ?.로 안전한 접근

---

📢 결론

• && / || → 조건부 렌더링이나 기본값 설정에 유용
• 옵셔널 체이닝(?.) → 깊은 객체 접근 시 에러 없이 안전하게 사용 가능
• 실무에서는 둘을 조합해서 사용하는 경우도 많음

💡 ➡ 조건부 렌더링은 &&, 안전한 데이터 접근은 ?.로 처리하면 깔끔하고 안전한 코드가 완성됨