React

react?

A JavaScript library for building user interfaces.

• dom tree 를 직접 사용하지 않고 component 를 만들어 virtual DOM 을 통해 사용한다.

Virtual DOM

• DOM 을 직접 제어하는 경우 : 바뀐 부분만 정확히 바꿔야한다.

• DOM 을 직접 제어하지 않는 경우 : 가상돔트리를 사용해 이전 상태와 비교하여 바뀐부분을 찾아 자동으로 바꾼다.

React Client Side Rendering

• 기본 적으로 react 는 client side rendering 이 일어난다.

• JS가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행되기 전까지는 화면이 보이지 않음

• JS가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행된 후, 화면이 보이면서 유자가 인터렉션 가능

Server Side Rendering

• JS가 전부 다운로드 되지 않아도, 일단 화면은 보이지만 유저가 사용 할 수 없음.

• JS가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행된 후, 유저가 사용 가능.

Install

• node.js 설치

• npm i react

• 만들어진 리액트 컴포넌트를 실제 돔에 연결 할때 ReactDOM.render() 를 사용한다.

라이브러리 이해

<script>
const Component = () => {
  return React.createElement(
    'p', // 생성 태그 
    null, // 태그 속성
    `${props.message}:${props.count}` // 태그 안의 내용
  );
};
  
ReactDOM.render(
  React.createElement(Component, {message: "init", count:0 }, null);
);
</script>