한 입 크기로 잘라먹는 React - Day 3

🗓 진행일: 2022.04.07 (새벽)

1. Truthy & Falsy

자바스크립트의 조건식에는 boolean형을 넣지 않아도 참 또는 거짓으로 인식을 하는 기능이 있다.

• Truthy (참 같은 값): 빈 배열 [], 객체 리터럴 {}, 숫자, 문자열 “0”, 문자열 “false”, Infinity
• Falsy (거짓 같은 값): null, undefined, 숫자 0, -0, NaN, “” (빈 문자열)

이걸 어따 쓰냐면,

const getName = (person) => {
  if (!person) {
    // undefined, null 등을 한꺼번에 체크하기 위해
    return "객체가 아닙니다";
  }
  return person.name;
};

let person = { name: "seul" };
const name = getName(person);
console.log(name);

2. 삼항 연산자

• (조건식) ? (참일 때) : (거짓일 때)
• 중첩으로도 사용 가능함 (가독성을 위해 가급적 if문 사용하자)ㄷ

let a;

const result = a ? true : false;
console.log(result);

3. 단락회로 평가

• 피연산자 중, 뒤에 위치한 피연산자를 확인할 필요 없이 연산을 끝내버리는 것 (논리연산자로)
• &&: 앞의 조건이 false면 뒤 안 봄
• ||: 앞의 조건이 true면 뒤 안 봄

// getName 함수 내에서 person을 받을 때
// null or undefined를 핸들링 하기 위해서 이전에는 if(!person) 이라는 조건식을 추가하여
// 오류가 뜨는 것을 방지했는데 단락회로 평가를 이용했더니, person이 falsy가 되어
// 뒤 확인도 하지 않고 리턴 됨

const getName = (person) => {
  // return person && person.name;
  const name = person && person.name; // person이 false가 아니면 그 다음 거까지 체크해서 .name 값이 들어감
  return name || "객체가 아닙니다."; // name이 true면 (값이 있으면) 뒤에 안 봐도 돼서 첫 번째 name값이 들어감
};

let person;
const name = getName(person);
console.log(name);

4. 조건문 업그레이드

// 주어진 문자열이 한식 종류에 해당하는지
function isKoreanFood(food) {
  // if (food === "불고기" || food === "비빔밥" || food === "떡볶이") {
  if (["불고기", "떡볶이", "비빔밥"].includes(food)) {
    return true;
  }
  return false;
}

const food1 = isKoreanFood("불고기");
console.log(food1);

5. 비 구조화 할당 (구조 분해 할당)

let arr = ["one", "two", "three"];

// let one = arr[0];
// let two = arr[1];
// let three = arr[2];

let [one, two, three] = arr;

이렇게 각각 배열의 값을 넣어주는 비 구조화 할당, 그런데 한 술 더 떠서

let [one, two, three] = ["one", "two", "three"];
console.log(one, two, three);

이런 식으로 배열의 선언 분리를 할 수 있음 (배열 자체를 선언하지도 않으시겠다는 거지)

let [one, two, three, four = "four"] = ["one", "two", "three"];
console.log(one, two, three, four); // four처럼 기본값 세팅도 됨

let a = 10;
let b = 20;

[a, b] = [b, a]; 
// a에는 오른쪽 배열 b의 값이 할당
// b에는 오른쪽 배열 a의 값이 할당

이런 식으로 굳이 temp라는 변수 없이도 2개 변수의 값 변경이 가능하다

그렇다면 객체는?

let object = { one: "one", two: "two", three: "three", name: "seul" };

// 기존에는 이렇게 사용함 (하나하나 할당)
// let one = object.one;
// let two = object.two;
// let three = object.three;

// object의 key값을 기준으로 할당
// let { one, name, two, three } = object;

// 할당은 하되, 변수명을 다르게 하고 싶다면?
let { one, name: myName, two, three, abc = "four" } = object;
// name이라는 key값을 기준으로 myName이라는 변수에 할당하겠다
// 기본값도 할당 가능

console.log(myName, one, two, three, abc);

앞으로 react에서 정말 자주 쓰인대

꼭 복습하기