react기초3 - CRUD(Create 편)

CREATE

- 이벤트핸드러 : 이벤트가 실행되었을 때 실행되어야하는 함수

- onChangePage / onChangeMode / onSubmit 이벤트

- UI에 영향을 주지않으면 state에 넣을 필요가없다 - 불필요한 랜더링 발생할 수 있음

 

 Contents 변경시 

- 배열에 데이터 추가 방식

1. push

   오리지널 배열값이 변경

2. concat

   오리지널 배열값에 추가 / 원본 변경 X / 새로운 배열이 리턴

   성능개선에 유리

 

- shouldComponentUpdate( ){} : render() 이전에 실행

  return true; 시 render 호출

  return false; 시 render함수 호출 X

shouldComponentUpdate(newProps, newState){
	newProps.data		// 바뀐 값
	this.props.data		// 현재(기존)의 값
}

  newProps , newState : 바뀐 값

shouldComponentUpdate(newProps, newState){
	if(this.propsdata === newProps.data){
    		return false;
	}
	return true;
}

  : 바뀐 값이 있을때만 호출

    push시 이전과 이후값이 같음! 그래서 concat을 사용

 

immutable

- 원본이 불변한다.

- Array.from() : 내용은 같지만 다른 배열을 생성

var a = [1,2];
var b = Array.from(a);
// 내용이 같을뿐 a와 b는 다르다.

- Object.assign() : 새로운 복제된 객체 생성 / 내용은 같지만 다른 객체 생성

var a = {name:'egoing'}
Object.assign({},a);		// 첫번째인자는 객체 선언 후 a 추가

- immutable.js 참조할 것