JSX안에서 AND문 쓰기

이렇게 코드를 작성하고 나면 리액트입니다. 가 나오고 name 부분을 '리액트' 가 아닌 다른 값으로 변경할 시

브라우저에는 아무것도 나타나지 않을것 입니다. 

 

따라서 해당 코드 처럼 && 연산자를 써서 조건부 렌더링을 사용할 수 있다.

 

그 이유는 리액트에서 false 를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문입니다.

여기서 한 가지 주의해야 할 점이 있는데요. falsy 한 값인 0 은 에외적으로 화면에 나타난다는 것입니다.

 

const number = 0;

return number && <div>내용</div>

 

이런 코드는 화면에 숫자 0을 보여 줍니다.

 

+ JSX는 언제 괄호로 감싸야 할까?

JSX를 주로 여러 줄로 작성할 때 괄호로 감싸고, 한 줄로 표현할 수 있는 JSX는 감사지 않습니다.

그렇다고 JSX를 괄호로 감싸는 것은 필수 사항이 아닙니다.

 

출처: 도서 - 리액트를 다루는 기술 중