언젠가는 펼쳐 볼 아카이브

[ReactJS] ReactJS 동작 이해를 위한 VanillaJS 와의 간단 비교 본문

IT/ReactJS

[ReactJS] ReactJS 동작 이해를 위한 VanillaJS 와의 간단 비교

개발자희망생고롸파덕 2023. 9. 21. 01:29
Vanilla JS React JS
 HTML을 먼저 작성하고, 작성한 HTML 요소를
Javascript 로 가져와서 HTML을 수정

  >> 동작이 HTML 시작해서 JS로 끝남		 HTML에 직접 작성하지 않고, Javascript 를 이용해
결과물을 HTML에 업데이트

>> 동작이 JS로 시작해서 HTML로 끝남
(유저에게 보여질 내용을 자유롭게 컨트롤 할 수 있음)
  • reactJS 규칙 : html을 해당 페이지에 직접 작성하지 않고 JS 코드를 이용해 작성하기

 

<< 예시 : 버튼을 클릭했을 때 횟수(counter)를 출력해주는 코드 >>

# Vanilla JS로 작성한 counter 소스코드

<!DOCTYPE html>
<html lang="en">
  <body>
    <span>Total clicks : 0</span>
    <button id="btn">Click me</button>

    <script>
      let counter = 0;
      const button = document.getElementById('btn');
      const span = document.querySelector('span');

      function handleClick() {
        counter += 1;
        span.innerText = `Total clicks ${counter}`;
      }
      button.addEventListener('click', handleClick);
    </script>
  </body>
</html>

>> 코드가 짧아보이지만, 만약 많은 동작을 하는 큰 소스코드라면 계속해서 handle 함수를 작성하고 getElement.. 등을

handle 및 getElements..가 반복해서 등장함

 

# ReactJS로 작성한 counter 소스 코드

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>
  <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>
    const root = document.getElementById('root');
    // 두번째 인자는 span의 property를 입력할 수 있음, 세번째 인자는 span의 content
    const span = React.createElement(
      'span',
      { id: 'sexy-span', style: { color: 'red' } },
      'hello i am a span'
    );
    //render : React element를 가지고 HTML로 만들어 배치하는 함수
    ReactDOM.render(span, root); // root 요소 안에 span을 랜더링 해줘라
  </script>
</html>

 >> 버튼도 만들어 보자

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>
  <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>
    const root = document.getElementById('root');
    // 두번째 인자는 span의 property를 입력할 수 있음, 세번째 인자는 span의 content
    const h3 = React.createElement(
      'h3',
      {
        onMouseEnter: () => {
          console.log('mouse Enter');
        },
      },
      'hello i am a span'
    );
    const btn = React.createElement(
      'button',
      {
        //addEventListener처럼 동작하게 작성
        onClick: () => console.log('i am clicked'),
        style: {
          backgroundColor: 'tomato',
        },
      },
      'Click me'
    );
    const container = React.createElement('div', null, [h3, btn]);
    ReactDOM.render(container, root);
  </script>
</html>

>> 바닐라 JS에서 사용한 addEventListener를 사용하지 않아도 동일하게 동작할 수 있음!

>> 위에서 작성한 reactJS로 element를 생성하는 방식은 잘 쓰지 않는 방식 (동작 방식을 이해하기 위해 작성한 것)

 

 

##ReactJS를 사용하기 위한 script import

//reactJS : 애플리케이션이 아주 interactive 하도록 만들어주는 라이브러리
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>

//react-dom : library 또는 package로, 모든 react element들을 html body에 둘 수 있도록 해줌
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

 

저작자표시 비영리 변경금지

'IT > ReactJS' 카테고리의 다른 글

[ReactJS] React 이론 공부 기초 - 4  (0) 2023.11.21
[ReactJS] React 이론 공부 기초 - 3  (0) 2023.11.20
[ReactJS] React 이론 공부 기초 - 2  (1) 2023.11.16
[ReactJS] ReactJS 이론 공부 기초 - 1  (1) 2023.11.13
[React JS] 이론 공부 : shortcut  (0) 2023.10.13
'IT/ReactJS' Related Articles more