👉 조건부 렌더링
- 특정 조건에 따라 다른 결과물을 렌더링 하는 것
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> }
}