React - Short-circuit AND operator ?

Short-circuit AND operator 란?

- 삼항 연산자를 단순화 할 수 있는 특별한 경우가 있다.

어떤 컴포넌트를 렌더링하거나 하지 않을때, && 연산자를 삼항 연산자처럼 사용할 수 있다.

&&연산자는 다른 프로그래밍 언어도 그렇겠지만, 자바스크립트에서

왼쪽 식을 먼저 평가하고, 그 다음 오른쪽 식을 평가할지 결정한다.

 

예를 들면 if(true && false) 이런식으로 있으면, 왼쪽이 true니까 오른쪽으로 가서 false를 확인하고, false를 반환하지만 

만약에 if(false && true) 이런 경우에는, 오른쪽 식을 평가하기 전에 왼쪽 식이 false 니까 false를 반환한다.

 

리액트에선 이 삼항 연산자를 이런식으로 사용할 수 도 있다.

 

return (
    <div>
        { showHeader && <Header /> }
    </div>
);

showHeader 가 true 라면, Header 컴포넌트를 리턴하고 스크린에 표시 될 것이다.

만약 showHeader 가 false 라면 Header 컴포넌트를 무시하고 div만 return 하게 될 것이당

 

이걸 응용하면 조건에 맞춰서 컴포넌트를 렌더링 해야할 때 유용하게 사용 할 수 있을것이다!

 

리액트 되게 신기한거같다.