![React컴포넌트
const MyComponent: React.FC = () => {
const [title, setTitle] = useState('제목');
return <div>{title}</div>;
};](https://image.slidesharecdn.com/react-principle-210412104707/85/React-principle-18-320.jpg)
![const MyComponent: React.FC = () => {
const [title, setTitle] = useState('제목');
return <div>{title}</div>;
};
1)title이라는값이있다.이title은setTitle을통해변경할수있다.
2)setTitle을호출하면MyComponent는render의목록에들어간다.
3)render목록에서현재프레임에표시되어야할값을계산한다.
4)이전과비교해서필요한부분만변경한다.](https://image.slidesharecdn.com/react-principle-210412104707/85/React-principle-20-320.jpg)
React principle
- 10. 실제로React가하는것 1) tree구조를 가지는 element tree를 만들어 놓는다 2) 가지고 있던 tree가 업데이트 되면 무엇이 업데이트 되었는지 비교한다 3) 바뀐 부분만 실제 DOM에 업데이트 한다 뭘그릴지에만관심이있는라이브러리
- 13. const people = { name: '호종호호종' }; people.name = '호종'; vs const element = document.querySelector('#people'); element.name = '호종'; DOM도객체니어짜피둘다객체접근.그러므로큰차이없다
- 15. React(와같은방식)가왜생산성을높여주나 버튼의가로사이즈를바꾸는코드 function changeWidth(width) { const searchButton = document.querySelector('#search_btn'); searchButton.style.width = width; } changeWidth('100px');
- 16. 버튼의가로사이즈를바꾸는코드 const myObj = { target: document.querySelector('#search_btn'), style: { width: '5px', }, render() { this.target.style = { ...this.target.style, ...this.style, }; }, };
- 17. ... function changeWidth(width) { myObj.style.width = width; myObj.render(); } changeWidth('100px'); - changeWidth 에서DOMapi에직접접근하지않는다.=>제어역전 -search_btn의상태를가지고있다가복원할수도있음 -개발자는데이터만바꾸면된다.그리는건myObj가알아서...
- 18. React컴포넌트 const MyComponent: React.FC = () => { const [title, setTitle] = useState('제목'); return <div>{title}</div>; };
- 19. 참고:JSXissyntacticsugar https://github.com/facebook/react/blob/master/packages/react/src/ReactElement.js#L146 const ReactElement = function (type, key, ref, self, source, owner, props) { const element = { // This tag allows us to uniquely identify this as a React Element $$typeof: REACT_ELEMENT_TYPE, // Built-in properties that belong on the element type: type, key: key, ref: ref, props: props, // Record the component responsible for creating this element. _owner: owner, }; return element; };
- 20. const MyComponent: React.FC = () => { const [title, setTitle] = useState('제목'); return <div>{title}</div>; }; 1)title이라는값이있다.이title은setTitle을통해변경할수있다. 2)setTitle을호출하면MyComponent는render의목록에들어간다. 3)render목록에서현재프레임에표시되어야할값을계산한다. 4)이전과비교해서필요한부분만변경한다.
- 22. 좀더깊은내용...
- 25. Recursive는 쪼갤수없다
- 27. ReactFiber