[React - 5] 조건부 렌더링

조건부 렌더링

조건부 렌더링이란, 특정 조건에 따라 결과물을 렌더링 하는 것을 의미합니다.

리엑트에서는 삼항연산자나 단축 평가 논리 계산법을 자주 사용합니다.

JSX 에서 null, false, undefined를 렌더링하게 된다면 아무것도 나타나지 않게 됩니다.

---

삼항 연산자

let result = 조건식 ? 참값 : 거짓값;

조건식에 따라 true면 참값을 리턴, false면 거짓값을 리턴 한다.

 

---

단축 평가 논리 계산법

false && false // 앞
true && false // 뒤
false && true // 앞
true && true // 뒤

false || false // 뒤 
true || false // 앞
false || true // 뒤
true || true // 앞

논리 연산자를 사용 할 때에는 무조건 우리가 true 혹은 false 값을 사용해야 되는 것은 아니다. 

문자열이나 숫자, 객체를 사용 하거나 Truthy, falsy한 값도 사용이 가능하다.

 

&&는 앞에 값이 truthy일때 뒤에 값을 리턴, falsy일때 앞에 값을 리턴한다.

||는 앞에 값이 truthy일때 앞에 값을 리턴, falsy일때 뒤에 값을 리턴한다.

---

학습 해보기

const namelessDog = {
  name: ''
};

function getName(animal) {
  const name = animal && animal.name;
  return name || '이름이 없는 동물입니다.';
}

const name = getName(namelessDog);
console.log(name); // 이름이 없는 동물입니다.