`&&`와 `??`

연산자의 알맞은 활용법이 이번 프로젝트에서 헷갈린 부분이었는데,

특정 auth_id값(user)을 가진 사용자만 접근할 수 있게 하려면 && 연산자나 ?? 연산자 사용을 생각했었다.

좋지 않은 방법이었는데 이유는 다음과 같다.

&&와 ??가 사용되지 않은 이유

&&는 조건이 참일 때만 특정 요소를 렌더링하고,
??는 값이 없을 때만 기본값을 제공하는 데 적합

&& 연산자:

&&는 조건이 참일 때만 뒤의 코드를 실행한다.
만약 user가 true일 때만 조건부로 요소를 렌더링하고 싶다면 &&를 사용할 수 있지만, 여기서는 user가 true일 때 다시 isAuthor를 평가하고 있기 때문에 &&를 사용하지 않은 것.

?? 연산자:

??는 널 병합 연산자로, 왼쪽의 값이 null 또는 undefined일 때만 오른쪽 값을 사용하는데 false 값이 되어서 사용되지 않음. 주로 기본값을 설정할 때 사용되며, 조건부 렌더링보다는 변수에 기본값을 할당하는 상황에 더 적합.

그러므로 삼항연산자를 사용하여 조건부 렌더링을 실행시켰다.

{ 
  user ? ( // 로그인된 상태일 때
    isAuthor ? ( // 작성자인 경우
      <>
        <button>수정</button> 
        <button>삭제</button>
      </>
    ) : null // 작성자가 아닌 경우 아무것도 렌더링하지 않음
  ) : null // 로그인되지 않은 상태에서도 아무것도 렌더링하지 않음
}

---

&&와 ?? 연산자 알아보자!

&& 연산자의 사용법

1. 두 값 모두 참일 때만 참을 반환:

   true && true;  // 결과: true
   true && false; // 결과: false
   false && true; // 결과: false
   false && false;// 결과: false

2. 조건부 렌더링:
   React에서 && 연산자는 조건부 렌더링을 위해 자주 사용됩니다.
   표현식이 true일 때만 특정 컴포넌트를 렌더링하고자 할 때 사용됩니다.

   {isLoggedIn && <p>로그인된 사용자입니다.</p>}

   위 코드에서 isLoggedIn이 true일 때만 <p>로그인된 사용자입니다.</p>가 렌더링됩니다.

&& 연산자의 동작 방식

&& 연산자는 다음과 같은 방식으로 평가를 진행합니다:

• 왼쪽 피연산자가 false로 평가되면, 왼쪽 피연산자를 반환합니다.
• 왼쪽 피연산자가 true로 평가되면, 오른쪽 피연산자를 반환합니다.

예시:

const a = 0 && 5; // 결과: 0 (왼쪽이 false로 평가됨)
const b = 4 && 5; // 결과: 5 (왼쪽이 true로 평가됨)

• a의 경우 0이 false로 평가되기 때문에 0이 반환됩니다.
• b의 경우 4가 true로 평가되고 오른쪽 5도 true로 평가되어 최종적으로 5가 반환됩니다.

---

?? 연산자의 사용법

?? 연산자는 널 병합 연산자(Nullish Coalescing Operator)라고 불리며, 왼쪽 피연산자가 null 또는 undefined일 경우에만 오른쪽 피연산자를 반환합니다.

?? 연산자의 동작 방식

?? 연산자는 다음과 같은 방식으로 평가를 진행합니다:

1. 왼쪽 피연산자가 null 또는 undefined가 아닌 경우: 왼쪽 피연산자를 반환합니다.
2. 왼쪽 피연산자가 null 또는 undefined인 경우: 오른쪽 피연산자를 반환합니다.

예시:

const a = null ?? "기본값"; // 결과: "기본값" (왼쪽이 null이므로 오른쪽 반환)
const b = undefined ?? "기본값"; // 결과: "기본값" (왼쪽이 undefined이므로 오른쪽 반환)
const c = 0 ?? "기본값"; // 결과: 0 (왼쪽이 null 또는 undefined가 아니므로 왼쪽 반환)
const d = "" ?? "기본값"; // 결과: "" (빈 문자열이지만 null이나 undefined는 아니므로 왼쪽 반환)

• a와 b는 왼쪽 값이 null 또는 undefined이기 때문에 오른쪽 값 "기본값"이 반환됩니다.
• c와 d는 왼쪽 값이 null이나 undefined가 아니므로 왼쪽 값이 그대로 반환됩니다.

?? 연산자와 || 연산자의 차이점

• || 연산자: Falsy한 값(false, 0, "", null, undefined, NaN 등)이면 오른쪽 피연산자를 반환합니다.
• ?? 연산자: null이나 undefined일 때만 오른쪽 피연산자를 반환합니다.

예시 비교:

const x = 0 || "기본값"; // 결과: "기본값" (0이 falsy이므로 오른쪽 반환)
const y = 0 ?? "기본값"; // 결과: 0 (0이지만 null이나 undefined가 아니므로 왼쪽 반환)

이렇게 ?? 연산자는 null 또는 undefined만 처리하고, 다른 falsy 값들은 그대로 사용할 때 유용합니다! 😊