5. Create 기능 구현 - React 기초 | 생활코딩

[출처 : https://opentutorials.org]

Props	State
props are read-only	state changes can be asynchronus
props can not be modified	state can be modified using this.setState

# 상위 컴포넌트가 하위 컴포넌트의 어떤 값을 바꾸고 싶을 떈 props를 통해서

# 하위 컴포넌트가 상위 컴포넌트의 어떤 값을 바꾸고 싶을 떈 이벤트를 통해서

---

19-6. create 구현 : contents 변경

# UI에 영향을 주지 않는 값은 this.state의 값이 아닌, this.state와 분리해서 객체의 값으로 지정한다.

 

# state에 값을 추가할 때는 .push()와 같이 original data를 변경하는 것이 아닌 .concat()처럼 새로운 데이터를 추가하는 것을 사용 

---

19-7. create 구현 : shouldComponentUpdate

shouldComponentUpdate(newProps, newState)

- 이 함수를 사용하면 현재 state 또는 props의 변화가 컴포넌트의 출력 결과에 영향을 미치는지 여부를 React가 알 수 있습니다. 

- props 또는 state가 새로운 값으로 갱신되어서 렌더링이 발생하기 직전에 호출됩니다. 기본값은 true입니다.

- 이 메서드는 초기 렌더링 또는 forceUpdate()가 사용될 때에는 호출되지 않습니다.

 

# render() 이전에 실행된다

# 함수의 return 값이 true이면 render()가 호출되고, false이면 render()가 호출되지 않는다.

# 새롭게 바뀐 값(newProps)과 이전 값(this.props)에 접근할 수 있다.

 

---

19-8. create 구현 : immutable

Array.from(arrayLike[, mapFn[, thisArg]])

유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 만듭니다.

 - arrayLike : 배열로 변환하고자 하는유사 배열 객체나 반복 가능한 객체

 - mapFn(optional) : 배열의 모든 요소에 대해 호출할 맵핑 함수

 - thisArg(optional) : mapFn 실행 시에 this로 사용할 값.

var arr = [1, 2];
var arr2 = Array.from(arr);
console.log(arr, arr2, arr===arr2);    // [1, 2]  [1, 2]  false

Object.assign(target, source)

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

 - target : 대상 객체

 - sources : 하나 이상의 출처 객체.

var obj = {name:"AGAL"};
var obj2 = Object.assign({age:20}, obj);
console.log(a, b, a===b);    // {name:"AGAL"}  {age:20, name:"AGAL"}  false

 

※ immutable.js