191212(목) TIL-1. React, assign()

[CODESTATES im16] React, assign()

1. Checkpoint

• A JavaScript library that builds on the premise of declarative and reusable components. : React
  • 선언적이고 재사용가능한 구성 요소를 전제로 구축한 JS라이브러리
• A structural framework for dynamic web apps. : Angular.jS
  • 라이브러리: 사용자인 내가 필요한 코드를 갖다 씀
  • 프레임워크: 구축된 틀에 사용자 코드가 얹혀짐.
• A predictable state container for JavaScript apps. : redux
• A JavaScript compiler that takes code written in one syntax and transpiles it to another using presets. : barbel

1-1. state의 특징

• 클래스 컴포넌트에서 사용 가능
• immutable하다: 데이터 제어를 철저하게 하기 위해 immutable한 특성
  • 관련 reference
• 컴포넌트 내부에서만 접근 가능하다(private)
• 변경하려면 setSatae()사용
• state변화의 결과로 life cycle이 순환한다.

1-2. Life Cycle API

• 컴포넌트의 생애주기 각 시점에 원하는 작업을 수행할 수 있게 도와주는 API

1-3. Life Cycle API method

• compoenentDidMount
• componentDidUpdate
• componentWillUnMount
• render: 실행후에는 compoenentDidMount나 componentDidUpdate가 실행됨.
• constructor

1-4. Debouncd, Throttle의 차이

• Debounce: 이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술.
• Throttle: 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 제어하는 기술.

시각화 예제: https://css-tricks.com/debouncing-throttling-explained-examples/

2. Sprint Review

2-1. 리액트 사용이유

동작에 집중하기 위해

프론트엔드 라이브러리의 사용이유: dom을 직접 건드리지 않고도 사용할 수 있고, 반복적으로 재사용할 수 있어서

리액드를 사용하는 이유: 취향껏

2-2. 리액트가 이렇게 돌아가는구나

Class vs Funtional: state를 어디에서 관리할것인가, life cycle메서드를 쓸 것인가.

라이프사이클(메서드)을 사용하는 이유:

• 특정 시점에 이벤트 핸들링을 용이하게 하기 위해
• 메서드들의 호출시점은 보장되어 있음.

3. Object.assign()

[MDN] Object.assign()

열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용함. 대상 객체를 반환함.

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target); // Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget); // Object { a: 1, b: 4, c: 5 }

이렇게만 보면 깊은 복사라고 생각하기 쉬운데 Array.prototype.concat과 유사하게 작동하며 깊은 복사를 하지는 않는다.

두 번째 인자로 들어오는 object의 내용물을 복사해서 첫 번째 인자로 들어오는 object에 속성을 복사한다.

속성의 값이 object 등의 레퍼런스 참조 타입일 경우 복사된 속성 또한 동일한 레퍼런스를 참조하게 되기 때문에 그것을 주의해서 사용해야 한다(원시타입의 속성은 깊은 복사). 아래는 그것을 설명하는 예제이다.

const target = { a: 1, b: {c:2} };
const copyTarget = Object.assign({}, target);

console.log(target); //Object { a: 1, Object { c: 2 } }
console.log(copyTarget); //Object { a: 1, Object { c: 2 } }

copyTarget.a = 10;
console.log(target); //Object { a: 1, Object { c: 2 } }
console.log(copyTarget); //Object { a: 10, Object { c: 2 } }

copyTarget.b.c = 20;
console.log(target); //Object { a: 1, b: Object { c: 20 } }
console.log(copyTarget); //Object { a: 10, b: Object { c: 20 } }