[React] 조건에 따라 요소를 보이게 하거나 숨기기 (&&, || 연산자)

함수형 컴포넌트를 기준으로 return한다고 할 때 요소를 때로는 보이게 때로는 숨겨서 할 수 있습니다.

check라는 변수가 있다고 할때 True이면 보이고 False이면 숨겨보는 코드를 작성해 보겠습니다.

import React, {useState} from 'react';

const hello = (props) =>{
	const [check,setCheck] = useState(true)
    
	return (
    	{check && <span>World</span>}
    );
}

이처럼 return을 할때 자바스크립트 코드를 작성하고 싶다면 { } 안에 작성하면 되고

&& 는 앞이 True이면 뒤의 것 실행, 반대로 || 앞이 False이면 뒤의 것 실행의 뜻을 담고 있습니다.

꼭 이러한 용도 뿐만이 아니라 더 다채롭게 사용 가능합니다.

 

추가로 요소를 보이거나 숨기게 하는건 class를 여러개 주어 때에 따라 선택적으로 사용할 수도 있습니다.