[리액트] 리액트를 시작하기 전에...

리액트는 왜 만들어졌는가?

• UI를 interactive하게 만들기 위해서!! 이것이 리액트가 만들어진 이유.

• 왜 React JS가 Super cool한지 Vanilla JS와 React JS를 비교해보며 알아보자!

/* React를 사용하지 않고 VanillaJS만을 사용해 만든 코드 */
<script>
  let click_count = 0;
  const counter = document.querySelector('#counter');
  const btn = document.querySelector('#btn');

  function onClick(event) {
    ++click_count;
    counter.innerText = `Total Clicks: ${click_count}`;
  }

  btn.addEventListener('click', onClick);
</script>

/* React를 사용해서 만든 코드 */
// 이해를 위한 코드임. 실전에서는 사용 X
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script>
  let click_count = 0;
  const root = document.querySelector('#root');
  const counter = React.createElement('span', { id: 'counter' }, 'Total clicks:');
  const click_btn = React.createElement(
    'button',
    {
      onClick: () => {
        ++click_count;
        console.log(click_count);
      },
    },
    'Click me'
  );
  const container = React.createElement('div', { id: 'container' }, [counter, click_btn]);

  ReactDOM.render(container, root);
</script>

• React JS는 interactive한 UI를 만들 수 있게 해주는 엔진 역할

• React-dom은 React element를 HTML에 배치하는 역할

Vanilla Js vs React Js

• 바닐라 JS는 HTML → JS의 순서

• 리액트는 JS → HTML의 순서 ⭐⭐⭐⭐⭐

SPA(Single Page Application)

• MPA(Multi Page Application) vs SPA(Single Page Application)
  • SPA는 페이지 요청 시마다 해당 Content만을 body에 동적으로 할당
  • React의 기초적인 동작 원리

리액트의 Pros & Cons

리액트의 Pros(장점)

• 빠른 업데이트 & 렌더링 속도

  • Virtual DOM(Document Object Model)을 이용한 빠른 Re-rendering
  • DOM과 다르게 업데이트 할 최소의 부분을 탐색 후, 그 부분만을 업데이트하여 다시 렌더링
    
    

• Component-Based

  • Component를 생성하고 결합하여 개발하는 방식 (like 레고 블록 조립)

  • 재사용성(Reusability)이 높음.

    • 개발 기간이 단축됨
    • 유지 보수가 용이함.

• 방대한 개발 생태계

  • 활발한 지식공유 & 커뮤니티

• React Native로의 연계성이 용이.

리액트의 Cons(단점)

• 방대한 학습량(Virtual DOM, JSX, Component, State, Props….)

• Version Update에 따라 지속적인 변화

• 높은 상태관리 복잡도

인용자료 출처
처음 만난 리액트