리액트가 탄생한 이유

5778 단어 TILreact.jsTIL

리액트는 자바스크립트 프레임워크중에 하나이며 현재 가장 많이 쓰이는 프레임워크이다. 이글에서는 왜 리액트를 사용해야 하는지, 리액트가 왜 나타났는지를 설명한다.

리액트를 사용하기 전..

다음 코드는 html/css, js만을 사용한 간단한 웹 프로그램이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <span>Total clicks:0</span>
    <button id="btn">Click me</button>
    <script>
      let counter = 0;
      const button = document.querySelector("#btn");
      const span = document.querySelector("span");
      function handleClick() {
        counter += 1;
        span.innerText = `Total Click:${counter}`;
      }
      button.addEventListener("click", handleClick);
    </script>
  </body>
</html>

버튼을 누르면 카운트를 1씩 증가하는 간단한 프로그램이다. 이를 작성하기 위해서는 먼저 html태그를 작성해야한다. 그리고 자바스크립트로 해당 태그들을 불러오는 작업이 필요하다. 다음으로, 태그에 해당하는 이벤트와 이벤트 실행시 동작 하는 함수를 작성하고 마지막으로 해당 함수와 이벤트를 연결해야한다. 정리하면 다음과 같다.

  1. html을 작성한다.
  2. js를 작성하여 태그와 이벤트에 사용할 함수를 작성한다.
  3. 클릭시, 카운트 값이 증가할때 이를 표기하기 위해 span 태그에 값을 입력하고, 업데이트 될 텍스트를 입력해야한다.
  4. 이벤트와 이벤트에 대응하는 함수를 연결한다.

이처럼 태그와 js코드, 데이터들을 일일히 모두 개발자가 작성 및 관리를 해야한다. 또한, 작성 미스가 발생해도 시스템에서는 이를 전혀 개발자에게 알려주지 않는다. 모든 것을 개발자 혼자서 해야한다. 이러한 불편함을 해결하기 위해서, 리액트는 나타났다.

레퍼런스

노마드코더 리액트 초급강의

자바의정석 기초편 예제 6-3
wait와 notify를 통해 이루어진 생산자 소비자 데모

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage