Comeponents
•
작고 재활용한 코드 조각
•
component가 class일 경우, function component 보다 더 강력하다.
•
항상 대문자로 시작해야한다는 규칙이 존재한다.
Instances
•
react에 의해 관리 되므로 react의 programming model 상 크게 중요하지 않은 개념이다.
•
class component만 instance를 가지고 있다. → function compoent는 실제로 자바스크립트 함수에 불과하기 때문에 instance가 아니라 리렌더링될 때 마다 새로 실행되는것 뿐이므로 instance가 존재하지 않는다.
•
function 컴포넌트는 instantiate 하지 않기 때문에 퍼포먼스 적으로 더 이득이 있다.
Elements
•
컴포넌트 instance 또는 DOM node와 property를 묘사하는 Plain Object
•
plain object임으로 당연하게도 실제 DOM 보다 가벼우며 순회가 빠르다. → 파싱할 필요가 없으니
•
elements는 실제 Instance가 아니다.
◦
react에게 “이게 화면에서 보고싶어”라고 전달해주는 방법이라고 보는게 맞다.
◦
정확히 표현하자면 개발자는 UI를 직접 그리는게 아닌 react에게 “이렇게 UI를 그려줘”라고 요청한다고 보는게 더 확실한 표현법이다. → 개발자가 아닌 리액트가 instances를 만들고 업데이트하고 파괴한다.
react에서 dom elements
{
type: 'button', // 해당 property가 string일 경우 DOM element임을 뜻함
props: {
className: 'button button-blue',
children: {
type: 'b',
props: {
children: 'OK!'
}
}
}
}
JavaScript
복사
<button class='button button-blue'>
<b>
OK!
</b>
</button>
HTML
복사
react에서 component elements
{
type: Button, // 해당 property가 함수또는 클래스면 react component임을 뜻함
props: {
color: 'blue',
children: 'OK!'
}
}
JavaScript
복사
const DangerButton = ({ children }) => ({
type: Button,
props: {
color: 'red',
children: children
}
});
JavaScript
복사