자바스크립트 논리연산자

&& AND 논리 연산자

var a1 = true && true;      // t && t는 true 반환
var a2 = true && false;     // t && f는 false 반환
var a3 = false && true;     // f && t는 false 반환
var a4 = false && (3 == 4); // f && f는 false 반환
var a5 = 'Cat' && 'Dog';    // t && t는 Dog 반환
var a6 = false && 'Cat';    // f && t는 false 반환
var a7 = 'Cat' && false;    // t && f는 false 반환

AND 논리 연산자는 왼쪽 값이 반드시 참이되야 오른쪽을 평가하고 오른쪽이 참이면 오른쪽 값을 반환한다.

|| OR 논리 연산자

var o1 = true || true;      // t || t는 true 반환
var o2 = false || true;     // f || t는 true 반환
var o3 = true || false;     // t || f는 true 반환
var o4 = false || (3 == 4); // f || f는 false 반환
var o5 = 'Cat' || 'Dog';    // t || t는 Cat 반환
var o6 = false || 'Cat';    // f || t는 Cat 반환
var o7 = 'Cat' || false;    // t || f는 Cat 반환

OR 논리 연산자는 왼쪽 값이 참이면 오른쪽 값을 평가하지 않고 왼쪽 값을 반환한다. 하지만, 왼쪽 값이 거짓이면 오른쪽을 평가하고 참이면 오른쪽 값을 반환한다.

출처 developer.mozilla.org

위와 같은 성질을 이용해서 변수의 초기값을 넣어주거나 어떤값이 반드시 있어야 계산을 하고 싶은것이 있을 때 활용한다. 아래와 같이 blog에 값이 있을 때 BlogList 컴포넌트를 실행해야 하는 경우 활용 할 수 있다.

const [blogs, setBlogs] = useState(null);

useEffect(() => {
	fetch('http://localhost:8000/blogs')
  	.then(res => {
      return res.json();
    })
  	.then(data => {
      setBlogs(data);
    })
}, []);

return (
	<div>
    	<BlogList blogs={blogs} title="Blogs"/> // error
    	{blogs && <BlogList blogs={blogs} title="Blogs"/>} // data가 null이 아닐때만 컴포넌트가 그려져야 error가 나지 않는다. 이때 자바스크립트 논리 연산자를 사용
  	</div>
)