|| 논리 OR 연산자 :: 동작 원리

 

|| 연산자는 논리 OR 연산자로 다음과 같은 방식으로 동작한다.

 

1. 왼쪽 값이 truthy(참)이면 왼쪽 값을 반환

2. 왼쪽 값이 falsy(거짓)이면 오른쪽 값을 반환

 

리액트에서는 이 동작을 활용해 기본값을 설정하거나, 값이 없을 경우 대체값을 렌더링할 수 있다.

|| 동작 예시

function Example({ username }) {
  return <h1>{username || 'Guest'}</h1>;
}

 

• 만약 username값이 있을 경우 (John) 참이기 때문에 'John' 출력
• 값이 없을 경우(null / undefined / false / ' ') 거짓으로 'Guest' 출력

 

주의할 점

0도 falsy로 평가 된다. 숫자 0을 값으로 사용하려면 이를 처리하는 로직이 필요하다.

function Example({ points }) {
  return <h1>{points || 'No points'}</h1>; // points가 0이면 "No points" 출력됨
}

 

위의 상황을 방지하기 위해서는 || 연산자가 아닌 명시적으로 확인해야 한다.

<h1>{points !== undefined ? points : 'No points'}</h1>