걸음마 개발자

• 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')
);