React는 무엇이고 왜 사용할까?

React는 무엇인가?

 

리엑트는 자바스크립트 라이브러리이다.

사용자 인터페이스 구축을 위한 자바스크립트 라이브러리

 

 

정의는 간단하다.

사용자 인터페이스 구축을 도와주는 자바스크립트 프로그랭밍 언어의 라이브러리이다.

 

정확히 말하면, 클라이언트 측 라이브러리.

 

즉, 방문자의 브라우저에서 실행되는 자바스크립트코드이다.

 

웹페이지에서 로딩이 된 후에 화면을 변경하려면 브라우저상에 자바스크립트를 사용해야 하기 때문에

다채롭고 상호작용이 뛰어난 사용자 인터페이스를 구현할 수 있다.

동작들이 아주 매끄럽고 빠르게 진행되는 것처럼 느껴진다.

 

새 HTML페이지를 요청하지 않았고, 서버로부터 생성되기를 기다릴 필요도 없다.

자바스크립트가 내부적으로 작업을 수행하면서 화면을 업데이트하기 때문에 가능한 일이다.

 

그래서 UI 도 근사하다. 동작들이 순식간에 일어난다.

새로운 페이지나 어떤 동작이 시작되기를 기다릴 필요가 없다.

개발자로서 제공하고 싶은 사용자 경험이기도 하다.

 

새로운  HTML페이지를 호출하고 기다리는 과정도 없이도

브라우저 내의 자바스크립트를 이용하여 화면상에 보이는  DOM을 조작할 수 있다.

자바스크립트만 있으면 충분하다.

 

 

왜 리엑트인가?

자 바스크립트만 사용하는 대신에 리엑트를 쓰면 왜 좋은가

아주 간단한 데모를 하나 보겠다.

페이지에 간단한 내용이 있고, 삭제 버튼을 누르면 

승인 또는 취소를 할 수 있는 팝업이 뜬다.

이 페이지에 보이는 것들이나 삭제 버튼을 눌었을 때의 동작은 모두 자바스크립트로 제어된다.

 

 

내부 파일 비교

 

HTML 페이지의 내부 App.js 파일의 모습을 보면

자바스크립트로만 만든 App.js 

const button = document.querySelector('button');

let modal;
let backdrop;

button.addEventListener('click', showModalHandler);

function showModalHandler() {
  if (modal) {
    return;
  }

  modal = document.createElement('div');
  modal.className = 'modal';

  const modalText = document.createElement('p');
  modalText.textContent = 'Are you sure?';

  const modalCancelAction = document.createElement('button');
  modalCancelAction.textContent = 'Cancel';
  modalCancelAction.className = 'btn btn--alt';
  modalCancelAction.addEventListener('click', closeModalHandler);

  const modalConfirmAction = document.createElement('button');
  modalConfirmAction.textContent = 'Confirm';
  modalConfirmAction.className = 'btn';
  modalConfirmAction.addEventListener('click', closeModalHandler);

  modal.append(modalText);
  modal.append(modalCancelAction);
  modal.append(modalConfirmAction);

  document.body.append(modal);

  backdrop = document.createElement('div');
  backdrop.className = 'backdrop';

  backdrop.addEventListener('click', closeModalHandler);

  document.body.append(backdrop);
}

function closeModalHandler() {
  modal.remove();
  modal = null;

  backdrop.remove();
  backdrop = null;
}

 

모달 함수 내용들이 보인다.

이 안에 자바스크립트 코드를 실행해서 다양항 element들을 만들고,

거기에 text나 css 클래스를 추가해 준다.

그 밑에는 closeModalHandler 함수 내용이 들어있다. (닫는 기능)

이러한 코드들이 elment들을 통합해서 화면상에 보여준다.

이것이 레이어팝업 모달에 사용되는 코드이다.

 

하지만, 이러한 간단한 동작기능에도 너무 긴 코드가 필요하다.

 

이 데모에서는 할 일이 하나뿐이지만. 여러 개를 만들려면 HTML코드를 단순 반복해서 추가할 수도 있고,

동적으로 추가할 수도 있다. 그렇게 되면 코드가 훨씬 어렵고 복잡해질 거다.

 

이 처럼 자바스크립트만으로도 잘 되고 자바스크립트만 쓰는 것이 최선일 때도 있지만 한계가 있다.

자바스크립트만 쓰게 되면 모든 단계를 하나하나 코딩해가야 한다.

element를 만들고, 내용을 설정하고, 클래스를 추가하고 , 리스터를 추가하고, 동작들을 추가하고, 등

 

이런 구현 방식을 명령형 접근방식이라고 한다.

매 동작, 매 단계를 다 쓰다 보면 한계에 도달하게 된다.

도달하지 않는다고 하더라도 개발자가 핵심적인 세부사항을 일일이 신경 써야 하는 문제가 생긴다.

버튼을 만들거나 텍스트를 설정하는 낮은 수준의 코드를 만들고 그 코드를 계속 굴리면서 반복작을 처리하게 된다.

 

 

리엑트로 만든 App.js

import Todo from './components/Todo';

function App() {
  return (
    <div>
      <h1>My Todos</h1>
      <Todo text='Learn React' />
    </div>
  );
}

export default App;

이제 같은 동작을 하는 데모(예제를) 리엑트로 만든 App.js의 모습이다.

 

리엑트코드에서 흥미로운 것은 사용자가 만든 HTML 컴포넌트나 elemnet가 있다는 것이다.

리엑트는 컴포넌트가 전부라 해도 과언이 아니라고 한다.

 

애플리케이션이 쪼개져서 작은 블록이나 컴포넌트가 되고,

각각의 블록이나 컴포넌트들은 고유의 기능이 있다.

 

코드가 훨씬 유지보수하기가 편하다.

Todo 사용자 지정 element가 있다. 

 

./components.Todo 경로로 들어가 보면

ines (25 sloc)  684 Bytes

import { useState } from 'react';

import Backdrop from './Backdrop';
import Modal from './Modal';

function Todo(props) {
  const [showModal, setShowModal] = useState();

  function showModalHandler() {
    setShowModal(true);
  }

  function closeModalHandler() {
    setShowModal(false);
  }

  return (
    <div className='card'>
      <h2>{props.text}</h2>
      <div className='actions'>
        <button className='btn' onClick={showModalHandler}>
          Delete
        </button>
      </div>
      {showModal && <Backdrop onClick={closeModalHandler} />}
      {showModal && <Modal text='Are you sure?' onClose={closeModalHandler} />}
    </div>
  );
}

export default Todo;

return 안에 HTML 코드도 보인다. Todo부분을 렌더링 하는 코드이다.

중요한 것은 코드들이 단계별로 반복되는 지루한 코드는 없다는 점이다.

 

placeholder랑 가변적인 element들도 보이는데 앞에서는 단순한 코드로 element를 만들고 text를 설정했었는데

리엑트에서는 그러한 코드를 직접 쓰지 않아도 된다.

대신에 라이브러리를 통해 호출해서 정의하게 된다.

 

복잡한 사용자 인터페이스를 만드는 것이 한층 쉬워진다.

이 때문에 리엑트를 사용하는 것이다.

 

사용자 지정 element를 만들고 나면 나머지는 리엑트가 다 알아서 한다.

두 개 이상의 모달창을 만들고 싶으면 사용자 지정 element 그냥 복사하면 된다.

import Todo from './components/Todo';

function App() {
  return (
    <div>
      <h1>My Todos</h1>
      <Todo text='Learn React' />
      <Todo text='Learn React again' />
    </div>
  );
}

export default App;

하나가 더 생겼고 기능들도 다 잘 동작된다.

바로 이런 점 때문에 리엑트 같은 프레임워크를 이용한다.