조건부렌더링, 옵셔널체이닝, 삼항연산자, 부정연산자

1. 조건부 렌더링이란?
2. 옵셔널체이닝 Optional-Chaining
3. 삼항연산자
4. 부정연산자
5. 거짓인 값과 참인 값

---

🦦 1. 조건부 렌더링이란?

Conditional-rendering
특정 조건에 따라서 렌더링 하는 방식

data && data.fetchProfile
=> 참이면 뒤에 그려주고 거짓이면 data그려줘

data || data.fetchProfile
=> 참이면 앞에 그려줘 거짓이면 뒤에 그려줘

nullish-coalescing

=> 거짓중에서도 null이나 undefined일때 뒤에를 그려줘

data ?? data.fetchProfile

---

다음은 조건부 렌더링 예시들이다.
📌 && 와 || 연산자는 자주 쓰이니 기억해 두자.

이것 또한 귀찮아서 짧게 줄인 최신 문법이 옵셔널 체이닝이다.

⛓ 2. 옵셔널체이닝 Optional-Chaining

data?.data.fetchProfile

=> data 있으면 보여주고 없으면 보여주지마

옵셔널체이닝과 조건부렌더링은 같은 의미이다.


data?.fetchProduct.name (옵셔널체이닝)
= data && data.fetchProduct.name (조건부렌더링)

 =>  data 있으면 보여주고 없으면 보여주지마

🌋 3. 삼항연산자

조건 ? 참일때 : 거짓일 때

data ? data.fetchBoard.writer : <div> loadindg...</div>

조건이 참일때 앞에 보여주고 거짓일 때는 뒤에 보여줘

=> 한줄로 쓸 수 있을 때 사용하는 것이 좋음

isLogin === true면 'currently' 를 반환

 isLogin === false이면 'not'을 반환

render() {
  const isLogIn = this.state.isLogIn;
  return (
    <div>
      The user is <b>{isLogIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}
 

🌥 4. 부정연산자

!true // false
!false // true
!'사과' // false
!!'사과' // true
Boolean('사과') //true
!!'사과'  // true
 

---

🌞 5. 거짓인 값과 참인 값

🫥 거짓인 값

• number - 0
• string - ''(비어있는 값)
• boolean - false
• null(비어있음 - 일부러 비워둔 값)
• undefined(비어있는 값)
• NaN - Not a Number

😐 참인 값

• number - 0을 제외한 모든 number 값 (1, -1, 2, 3, ... )
• string - 비어있지 않는 모든 string 값
• 거짓이 아닌 나머지 모든 값