- DOM ( Document Object Model )
-
렌더링
-
== 랜더링 엔진
-
HTML, CSS
-
볼 화면을 그려내는거 == 압축 풀어서 실행하는 거
-
-
-
React
-
User Interface 배치 위한 자바스크립트 라이브러리
-
컴포넌트를 이용한 배치
-
클래스형 컴포넌트 ( 지는 해 )
-
코드 안에서 라이프사이클 기능, state 기능
-
라이프 사이클 기능
-
실행 or 업데이트 or 제거될 때 특정 이벤트 호출되는 것
-
-
-
render 함수가 필수
-
랜더 : 화면에 띄우는 거
-
-
-
함수형 컴포넌트
-
hook을 사용하여 라이프사이클 기능과 state 기능을 구현
-
-
왜 함수형 컴포넌트가 뜨는 해인가 ?
-
가독성 -> 요건 맞는 거 같음.
-
props 에 따른 결과를 보장받음
-
메모리 자원 덜 쓴다고 카더라.
-
빌드 후 파일 크기가 더 작다고 카더라.
-
-
-
-
Props 이용하여 데이터 전달
-
State 이용하여 상태 변화 감지
-
이 후 컴포넌트 업데이트
-
-
직접 랜더링 하지 않음. 배치만 해줄 뿐.
-
React 에서 변경이 감지되면 React DOM 에게 알림
-
뭐를 알림 ? 알린다기보다는 virtual DOM 을 전달함
-
가상의 DOM 을 React DOM 에게 줌
-
가상의 DOM 과 실제 DOM 이 서로 똑같으면 업뎃 안 함
-
가상의 DOM 과 실제 DOM 이 다른 부분이 있으면 그 부분만 업뎃 함
-
-
-
-
src/App.js( react, 함수형 컴포넌트 )
import React from 'react';
export const App = () => {
return <div>Hello world</div>;
}
export default App;
src/App.js ( react, 클래스형 컴포넌트 )
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!
</div>
)
}
}
export default App;
src/index.js ( react DOM, 랜더 해주는 곳 )
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(
<App>
</App>,
document.getElementById('root')
);
