본문 바로가기
React/ReactJs로 영화 웹 만들기 (노마더 코드)

Vanilla JS와 ReactJS의 비교 #2

by 쑤웅 2023. 1. 23.

Vanilla JS

HTML 먼저 만들고, Javascript 가져와 HTML 수정 방식

<!DOCTYPE html>
<html lang="en">
  <body>
    <button id="btn">Click me</button>
  </body>
  <script>
    let counter = 0;
    const button = document.getElementById('btn');
    function handleClick() {
      counter = counter + 1;
      span.innerText = `Total clicks: ${counter}`;
    }
    button.addEventListener('click', handleClick);
  </script>
</html>

 

 

React JS

Javascript 시작 이후 HTML이 됨.
(HTML을 이 페이지에 직접 작성하지 않고, 그대신 javascript 코드 사용)

 

React JS와 react-dom

React JS (= 엔진)
어플리케이션 interactive하게 만들어주는 라이브러리
element를 생성하고 event listener를 더하는 것을 도와준다.

react-dom
react element를 html에 두는 역할과 html로 바꾸는 역할을 한다.

 

규칙

  1. createElement로 argument를 만들때는 유효한 html태그면 가능하다.
  2. property에다가 id, style, event listener를 등록할 수 있다
     (event를 작성할 때는 on + event처럼 이벤트 앞에 on을 꼭 붙여줘야한다.) 
    *주의!*event listener를 등록할때 대소문자 구분 해야함!
  3. render에 꼭 선언을 해야한다.
    더보기
    render : react element를 가지고 html만들어서 배치하여 사용자한테 보여줌

JavaScript 후 html로 변환이 되는 형태라 Vanilla JS와 보다 더 쉽고 간단하게 코드를 작성할 수 있다.

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>
  <!-- react 선언 -->
  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script>
    const root = document.getElementById('root');
    
    const btn = React.createElement(
      'button', { onClick: () => console.log("I'm clicked") }, 'click me'
    );
    
    ReactDOM.render(btn, root);
  </script>
</html>

 

 

JSX

js 확장한 문법이다.
html에서 사용한 문법과 흡사한 문법을 사용한다.

더보기

html element는 html태그처럼 열고 닫아주면 됨
content는 html처럼 태그 안에 적으면 됨
property는 html의 속성처럼 적으면 됨

 

규칙

  1. 컴포넌트의 첫 글자는 반드시 대문자여야 한다.
    (소문자로 쓰게 된다면 html태그라고 생각을 한다.) 

 

+플러스

더보기

함수 선언하는 방법

  1. const 변수명 = ( ) => (
    )
    const = ( ) => ( )는 retrun 한다는걸 전제  = 방법 2와 같음
    const = ( ) => { }는 return을 안한다는걸 전제(return하고 싶으면 return을 선언해주면 된다.)
  2. function 변수명 ( ) {
    return( )
    }

 

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/bable">
        const root = document.getElementById('root');
 
        const Button = () => (
          <button style={{ backgroundColor: 'tomato', }} onClick={() => console.log("I'm clicked")}>
            Click me
          </button>
        );

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

 

 

 

결론

JSX 기반으로 된 React JS가 html 태그 기반이라 하기도 쉽고 사용하기도 편하여 이 툴을 많이 선호하고 많이 사용한다.

저작자표시 (새창열림)

댓글

티스토리툴바