React 공식 문서로 디테일 잡기 (고급)
PropsTypes
Props의 타입을 확인하기 위한 도구 (flow, ts 와 같은 정적 타이핑 도구)
Greeting.propsTypes = {
name: PropTypes.string
}
타입 유효성 검사기
prop에 유효하지 않은 값이 전달 되면 js 콘솔창에 보이고, 성능상의 이유로 개발 모드에서만 확인된다.
propsTypes 내부에 함수를 넣어줘서 커스텀한 유효성 검사를 할 수도 있다.
customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
'Invalid prop `' + propFullName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
})Reconcilation
재조정. UI 갱신에 대한 React의 접근법.
비교 알고리즘 (Diffing Algorithm)
두 개의 트리를 비교할 때, React는 두 엘리먼트의 루트(root) 엘리먼트부터 비교한다.
엘리먼트의 타입이 다른 경우
react는 이전 트리를 버리고 새로운 트리를 구축한다.
이전 트리는 아예 파괴한다.
루트 엘리먼트 아래의 모든 컴포넌트도 언마운트되고 그 state도 사라진다. 예를 들어, 아래와 같은 비교가 일어나면,
<div>
<Counter />
</div>
<span>
<Counter />
</span>이전 Counter는 사라지고, 새로 다시 마운트가 된다.
DOM 엘리먼트의 타입이 같은 경우
같은 타입의 두 react DOM 엘리먼트를 비교할 때, React는 두 엘리먼트의 속성을 확인하여, 동일한 내역은 유지하고 변경된 속성들만 갱신한다.
<div className="before" title="stuff" />
<div className="after" title="stuff" />이 두 엘리먼트를 비교하면, React는 현재 DOM 노드 상에 className만 수정한다.
자식에 대한 재귀적 처리
key 값을 지정해서 자식 재귀 처리 시 효율성을 확보한다.
DOM 노드의 자식들을 재귀적으로 처리할 때, react는 동시에 두 리스트를 순회하며 차이점이 있으면 변경을 생성한다. 이 때 자식 요소가 하나 추가 되는 예시에서 key 값이 없으면 모든 요소를 새로 만들기 때문에, key 값을 지정해서 한 요소만 추가될 수 있도록 한다.
Virtual DOM
가상의 표현(virtual DOM)을 메모리에 저장하고 실제 DOM과 동기화 하는 과정 === 재조정!
Design Principles
react의 개발 원칙
React DevTools
React Developer Tools
profiler 같은 기능을 웹 브라우저 자체에서 제공하고 있다.
