0918

오늘도 리액트 공부, 드림코딩, react 문서를 보고 알게 된 점.
JSX
삽입된 모든 값을 렌더링하기 전에 이스케이프 하므로, 애플리케이션에서 명시적으로
작성안된 내용은 주입되지 않음. 모든 항목은 렌더링 되기 전에 문자열로 변환
xss (cross site scripting ) 공격을 방지한다.

JSX는 객체를 표현
Babel은 JSX를 React.createElement() 호출로 컴파일
React 엘리먼트는 불변객체입

리액트는 상태가 변하면 전체가 다시 render되지만,
VDOM을 활용해, 메모리상에 트리를 보관하기 때문에 실직적으로 값이 바뀐것만 찾아
업데이트 한다.

멀티스레딩환경에서, concurrency 가 발생하는 환경에서
그 안에 작은 단위인 오브젝트를 변경하는 것은 지양
항상 오브젝트는 불변으로 놔두고, 새로운 오브젝트를 만드는 것이 좋음
-> 라이브러리 찾아보기

purecomponent

object, shallow, Deep 차이점 이해하기
오브젝트 안에 데이터가 변경되어도
동일한 오브젝트는 동일 레퍼런스를 가지고 있기 때문에
그냥 레퍼런스를 비교한는 연산자를 쓰면 true로 나오게 된다.

중요!
class는 한번 만들어 지면
class 안의 멤버 변수들은 한번만 할당이 되고, state 값이 변경되면
render만 호출된다.

반면, 함수에서는
함수 범위의 코드블록이 반복 호출된다 (지역 변수들도)
useState api 사용하면 값들을 알아서 react가 기억하여 저장
useState, useRef
한번만 만들고, 메모리에 저장하여 재사용한다. (react hook)
useCallback 사용해서 콜백함수 업데이트 되는 사이드이펙트 방지
useState -> primitive type뿐 아니라 object도 배열로 만들 수 있다.

object 개념 다시,

const obj1 = {}; // 'object literal' syntax
const obj2 = new Object(); // 'object constructor' syntax
//javascript -> 동적으로 런타임때 타입 결정 그래서 객체 먼저 정의하고 나중에 프로퍼티 추가 삭제 가능
const sujin = {name: 'sujin', age: 4};
sujin.hasJob = true; //하지만 유지보수 측면에서 지양

2. conputed properties (key should be always string)

sujin.name <- dot 문법을 이용한 접근
sujin['name'] <- computed property

dot -> 코딩하는 그 순간, 키의 값을 받아올 떄
computed property -> 어떤 값인지 모를 때, 런타임에서 결정될 때

//conputed properties 쓰는 예시
function printValue(obj, key){
	console.log(obj[key]);
   }
printValue (sujin, 'name');
printValue (sujin, 'age');

3. properties value shorthand

//constructor function으로 반복적 객체 생성
const pserson1 = new Person('sujin', 23)
const pserson2 = new Person('minsu', 25)

function Person(name, age){
	this.name = name;
    this.age = age
    }

4. in operator : property existence check (key in obj)

console.log('name' in sujin); //-> true or false

5. for .. in vs for..of

모든 키들을 출력
for (key in sujin){
	console.log(key)
    }
    
//for (value of iterable)
for(value of array){
console.log(value
}

6. cloning
   다른 두 변수가 동일한 오브젝트를 참조하게 하면 오브젝트 변경시
   두 변수 모두 변경

const user4 = Object.assign({}, user);
console.log(user4)

//유의할 점
const fruit1 = {color: 'red'};
const fruit2 = {color: 'blue', size: 'big'};
const mixed = Object.assign({}, fruit1, fruit2);
console.log(mixed) //fruit2로 출력, 뒤의 값으로 덮어 씌워짐

탬플릿 만들기
cp -R template habit-tracker