console.log("typeof [] : " + typeof []);
//typeof [] : object
console.log("typeof '' : " + typeof(''));
// typeof [] : object
console.log("typeof false : " + typeof false);
// typeof false : boolean
console.log("typeof null : " + typeof null);
// typeof 0 : number
console.log("typeof 0 : " + typeof 0);
// typeof false : boolean
console.log("typleof {} : " + typeof {});
// typeof {} : object
const checkValue = (a: any) : void => {
const result = a ? true : false
console.log(`result : ${result}`)
}
checkValue([]); //true
checkValue(''); // false
checkValue(0); // false
checkValue(null); // false
checkValue(false); //false
checkValue({}); //true
임의로 내용을 표시할 컴포넌트를 구현했습니다.
const BigbangComponent = () => {
return(
<p>Thou hast turned for me my mourning into dancing:
Thou hast put off my sackcloth, and girded me with gladness. Psalm 30:11</p>
)
}
export default BigbangComponent;
위에서 작성한 컴포넌트를 import한 후 && 연산을 수행했습니다.
import BigbangComponent from "./BigbangComponent";
return(
<>
<p style ={{"color" : "red"}}>&& 조건 없음</p>
<BigbangComponent/><br/>
<p style ={{"color" : "red"}}>1. 빈 배열 ([])</p>
{[] && <BigbangComponent/>}<br/>
<p style ={{"color" : "red"}}>2. 빈 문자('')</p>
{'' && <BigbangComponent/>}<br/>
<p style ={{"color" : "red"}}>3. 숫자 0</p>
{0 && <BigbangComponent/>}<br/>
<p style ={{"color" : "red"}}>4. null</p>
{null && <BigbangComponent/>}<br/>
<p style ={{"color" : "red"}}>5. false</p>
{false && <BigbangComponent/>}<br/>
<p style ={{"color" : "red"}}>6. 빈 객체({})</p>
{{} && <BigbangComponent/>}<br/>
</>
만일, 서버에서 데이터를 fetch한 결과가, 빈배열([ ])일경우는 배열의 length 프로퍼티를 사용해야, 불필요한 우측에 있는 컴포넌트가 표시되지 않습니다.
import BigbangComponent from "./BigbangComponent";
return(
<>
<p style ={{"color" : "red"}}>1-1. 배열.length가 0 ([])</p>
{[].length > 0 && <BigbangComponent/>}<br/>
<p style ={{"color" : "red"}}>1-2. 배열.length가 0 이상 ([])</p>
{["1"].length > 0 && <BigbangComponent/>}<br/>
</>
)