2022/11/10 - TIL

라이프사이틀

리스트안에 고유한 id값을 넣는 것이 좋은 이유는 리스트를 섞을 때 순서가 이상하게 바뀔수도있다.

shouldComponentUpdate ⇒오직 성능 최적화만을 위한 것이다. 참조 값이 다르지만 값이 같다면 새로 렌더가 안되도록 막아주는 역활을 한다.

shouldComponentUpdate(nextProps, nextState){
	if(this.props.data===nextProps.data_{
		return false
	}
	return true
}

render(){}

getSnapshotBeforeUpdate(prevProps, prevState){
	console.log('update DOM, repainting / reflow UI')
//리페인트, 리플로우가 발생하는 이전 시점
//sanpshot은 데이터를 이야기한다

//스냅샷(정보: 데이터) 반환
	return 'something'
}

componentDidMount(){
	
}

Render와 commit단계가 두가지가 있다. Render 단계에서는 DOM에는 접근할 수 없다. DOM은 commit단계에서 접근이 가능하다. 리액트는 UI가 매끄럽지 않기 때문에 이것을 해결하기 위해 이러한 디테일한 시점을 설정하는 것이 많다

오류처리

다른 것은 함수가 class를 흉내낼 수 있다. 하지만 오류처리 같은경우에는 함수에서 처리할 수 없다.

static getDerivedStateFromError(error)
componentDidCatch(error,errorInfo)

this를 못쓰는건 생성전것과 오류처리는 this를 못쓴다.

TDD

<ToggleButton 
	onToggle={this.handleToggleButtonContext.bind(this, index)}
/>

<ToggleButton 
	onToggle={()=>handleToggleButtonContext(index)}
/>

결과는 같다 화살표 함수 혹은 bind