React_02 ) 조건부 렌더링

박영은·2022년 4월 27일
0

👉 조건부 렌더링

  • 특정 조건에 따라 다른 결과물을 렌더링 하는 것

1) 삼항연산자

  • 기본 구조 = 조건명 ? true값 : false값
    (조건이 정해져있는 상태여야 함.)
  • 조건이 true일 땐 왼쪽의 true값이 반환되고, false면 오른쪽의 false값이 반환됨.
ex)
isReal = true
...
 			{ isReal ? <b>myProject</b> : null }
							 -> myProject가 출력됨.



2) &&연산자

  • 기본 구조 = 조건명 && true값
    (조건이 정해져있는 상태여야 함.)
  • 조건의 값이 true라면, 지정한 true값이 반환되고, false라면 null이 반환됨.
ex)

isReal = true
...
  			{ isReal && <b>myProject</b> }
							 -> myProject가 출력됨.
                             
--------------------------------------------------------------

isReal = false
...
  			{ isReal && <b>myProject</b> }
							 -> null. 아무것도 보여지지 않음.



3) || 연산자

  • 기본 구조 = 조건명 || false값
    (조건이 정해져있는 상태여야 함.)
  • 조건의 값이 false라면 0 또는 오른쪽의 false값이 반환됨.
ex)
isReal = { name : true }
...
			 { !isReal.name || <b>myProject</b> }
 							-> myProject가 출력됨.



4) null 병합 연산자

  • 기본 구조 = 조건명 ?? null or undifined 시 보여질 값
    (조건이 정해져있는 상태여야 함.)
  • 조건의 값이 null 또는 undifined일 때, 0 또는 오른쪽의 false값이 반환됨.
ex)
isReal = { name : true }
...
			 { isReal.age ?? <b>myProject</b> }
 							-> isReal 안에 age는 없음. = myProject 반환



5) 함수 - switch 문

  • 함수에서 조건부 로직을 처리하는 방법
    - 조건부 로직을 처리할 것이 많을수록 사용했을 때 편리함.
  • 조건의 값에 맞는 로직이 반환됨.
ex)
this.isReal = { 
 	id: 1
	age : "20살",
}

setSearchId(param){       --- (switch 함수 생성)
	switch(param){
    	case: "20살" : 
        	return <p> "20살입니다." </p> ;
        case: "22살" : 
        	return <p> "22살입니다." </p> ;
        case: "25살" : 
        	return <p> "25살입니다." </p> ;
        default :        --------------------- default값 설정 가능 !
        	return <p> "28살입니다." </p> ;
    }
}

...	
	<div>      /* 함수 호출 */
    	{   setSearchId(this.isReal.age).  }
        			- isReal의 age를 비교하여 해당 case에 맞는 값을 return함.
                    
        => isReal.age = "20살"
          				    => 20살입니다.
        
    </div>
			 { isReal.age ?? <b>myProject</b> }
 							-> isReal 안에 age는 없음. = myProject 반환



5) switch 표현식

  • js에서 지원되는 기능.
  • 위의 switch 문과 다르게 default값을 설정할 수 없음
    = || 연산자를 이용해서 설정.
ex)
this.isReal = { 
 	id: 20,
	age : "20살",
}
...

	<div>      /* 함수 호출 */
     {
    	{
    	20 : <p> "20살입니다." </p> ,
        22 : <p> "22살입니다." </p> ,
        25 : <p> "25살입니다." </p> ,
    	} this.isReal.id  ||  <p> " default값 28살입니다. " </p> 
     }
    </div>
        

👩‍💻 변수에 담아서 사용하면 코드가 더욱 간결해진다.

ex)
const people = {
		20 : <p> "20살입니다." </p> ,
        22 : <p> "22살입니다." </p> ,
        25 : <p> "25살입니다." </p>
}
this.isReal = { 
 	id: 20,
	age : "20살",
}
...

	<div>      /* 함수 호출 */
    	{ people[this.isReal.id]  ||  <p> "default값 28살입니다." </p> }
}
        



profile
Front-end

0개의 댓글