리액트 구조

리액트가 만들어진 이유

리액트는 어떤 상태가 바뀌었을 때, 그 상태에 따라 DOM을 어떻게 업데이트 할 지 규칙을 정하는 방식이 아니라, 다 없애버리고 처음부터 모든걸 새로 만들어서 보여준다는 생각에서 시작되었다.

업데이트 ?

동적인 UI를 위해서는 모든걸 없애버리고 새로 만들면 속도가 느릴 것이다.
큰 어플리케이션일수록 속도에 대한 부담감은 커지게 되는데 리액트는 이것을 Virtual DOM으로 해결했다.

Virtual DOM

리액트에서 사용되는 가상의 DOM으로, 브라우저에 보이지 않고 메모리상에서 가상으로 존재한다. JavaScript 객체이므로 성능이 브라우저에서 DOM으로 보여주는 것보다 속도가 매우 빠르다.

리액트는 상태가 업데이트되면 업데이트가 되어야 하는 부분의 UI를 Virtual DOM으로 렌더링한다. 그리고 리액트 개발팀이 만든 비교 알고리즘을 통해 실제 브라우저에 보이는 DOM과 비교하여 차이가 있는 부분을 감지하여 fetch 한다.

(공식문서) React의 세계에서 “virtual DOM”이라는 용어는 보통 사용자 인터페이스를 나타내는 객체이기 때문에 React elements와 연관됩니다. 그러나 React는 컴포넌트 트리에 대한 추가 정보를 포함하기 위해 “fibers”라는 내부 객체를 사용합니다. 또한 React에서 “virtual DOM” 구현의 일부로 간주할 수 있습니다.

element

엘리먼트는 React 앱의 가장 작은 단위이다. 엘리먼트는 화면에 표시할 내용을 기술한다. 브라우저 DOM 엘리먼트와 다르게 React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다.

렌더링 된 엘리먼트 업데이트하기

React 엘리먼트는 불변객체다. 생성 후 엘리먼트 자식이나 속성을 변경하지 못한다는 얘기다. 그래서 엘리먼트는 하나의 프레임 같이 특정 시점의 UI를 보여준다. UI를 업데이트 하기 위해선 새로운 엘리먼트를 생성하고 이를 root.render() 로 전달해야 한다.

const root = ReactDOM.createRoot(
  document.getElementById('root')
);

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  root.render(element);
}

setInterval(tick, 1000);

위 함수는 setInterval() 콜백으로 초마다 root.render()를 호출한다. 이것은 렌더링 된 출력값을 바꾸기 위해 root.render() 를 호출하는 방식인데 React에선 Clock 컴포넌트를 재사용하고 캡슐화하는 방법이 있다.

이 컴포넌트는 스스로 타이머를 설정하여 매초 알아서 업데이트 할 수 있다. 자세한 건 공식문서 링크를 참조했다.
=> State와 LifeCycle