[ ] , ' ', 0 ,null, false ,{ }의 타입 및 평가

Jayden ·2023년 3월 22일
0

(1) 타입 확인

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

(2) 값 평가

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

(3) true, false에 따른 컴포넌트 표시(React)

임의로 내용을 표시할 컴포넌트를 구현했습니다.

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/>

</>
  
)  

profile
J-SONE 프론트엔드 개발자

0개의 댓글