[TIL] 240117(수) React 입문 시작...! 💪🏻

오늘 공부한 내용 정리💁🏻‍♀️

1. 복습한 내용

Javascript의 ES6 문법

1) 상수와 변수

• 상수 : const(constant : 변함없는 수)
• 변수 : let

const a = 1;
let b = 3;

a = 3; // 상수는 한 번 선언한 값을 다시 할당할 수 없다.
b = 2; // 변수는 값을 재할당 가능

console.log("a :", a); // Error
console.log("b :", b); // b : 2

• var는 그냥 쓰지마쓰지마...!!
  -> Block level scope를 따르지 않기 때문에 종종 다른 언어와 오해가 발생한다.

  if (1 === 1) {
  // 항상 이 안으로 들어온다
  var c = 3;
  console.log("c", c);
  }
  console.log("바깥 c", c); 
  // var는 block level scope를 가지지 않는다. = {} 밖에서도 값이 그대로 선언된다.

2) 구조분해할당 (Destructuring)

const person = {
  name: "홍길동",
  age: 30,
};

const { name, age, norFound } = person; // 객체 내부의 key들에 접근하여 value를 구할 수 있다. 

console.log(name); // 홍길동
console.log(age); // 30
console.log(norFound); // 할당된 값이 없으므로 undefined

2. 새롭게 배운 내용

1) JSON.parse()/ JSON.stringify()

• JSON.parse() : JSON의 형태가 아닌걸 넣으면 JSON 형태로 다시 묶어줌!!
• JSON.stringify() : JSON 형태를 문자열로 쫙 풀어버림..!

주로 객체의 key-value의 값은 "주소값"으로 data가 저장이 되므로, obj2의 value 값을 바꾸고 싶어도 얕은 복사로 인해 obj1의 값이 함께 바뀌게 된다.
이를 방지하기 위해 obj3와 같은 방법으로 value 값만 수정할 수 있다.

const obj1 = {
  value1: 10,
};

const obj2 = obj1; // 1번째 방법 : 얕은 복사가 일어난다. 
const obj3 = JSON.parse(JSON.stringify(obj1)); // obj1을 문자열 형태로 쫙 풀어버렸다가 다시 묶는다.
// = 새로운 객체를 만든다. = 다른 주소값을 생성해버린다 = 새로운 주소값을 반환한다.

obj1.value1 += 1;

console.log("obj1", obj1); //obj1 { value1: 11 }
console.log("obj2", obj2); //obj2 { value1: 11 }
console.log("obj3", obj3); //obj2 { value1: 10 } // 얘는 값이 obj1 값을 그대로 지켜준다!

2) ${ } : place holder

: { 중괄호 } 안에 변수명을 넣어줄 수 있음!!
-> javascript 과제를 진행할 때, 주로 사용했던 값을 입력해주는 방식이었다.

const testValue = 3;

console.log(`문자열 ${testValue} 입니다`); 
// placeholder를 이용하여 변수명을 넣어 원하는 값을 넣을 수 있다.

하루를 마치며...🤔

오늘부터 react 입문 강의가 시작되었다. 중간에 잠깐 병원때문에 외출을 하느라 생각보다 하루종일 집중을 할 수 있는 시간이 적었다. 내일도 국취제 상담때문에 잠깐 빠져야하는데.. 빠진 시간만큼 앞뒤로 시간을 보태서 더 열심히 강의를 수강해야겠다!! React 화이팅!!!