[기본 개념] React

 

React란?

• 프레임워크가 아닌 라이브러리로 정의됨. (React 공식문서 참고)
• Facebook(現 meta)에서 만든 JavaScript UI 라이브러리임.
• SPA(Single Page Application) - 단일 페이지로 구성된 웹 애플리케이션

 

<라이브러리와 프레임워크 비교>

	라이브러리 (Library)	프레임워크 (Framework)
주도권	개발자가 필요한 기능을 호출해서 사용 (개발자가 흐름을 제어)	프레임워크가 전체적인 구조를 결정하고 개발자가 필요한 부분을 작성 (프레임워크가 흐름을 제어)
구성요소	특정 기능을 제공하는 모듈이나 함수의 집합	애플리케이션의 구조와 개발 패턴을 제공
유연성	원하는 방식으로 조합하여 사용 가능	정해진 방식대로 개발해야 함
예	React, jQuery, Lodash	Angular, Vue.js, Next.js

 

---

React Component

• UI 요소 구분하는 단위
• 컴포넌트를 class, 함수로 정의할 수 있음. 둘 다 동일하게 작동됨.

 

---

 

React 리렌더링

• 필요한 부분만 업데이트 함.
• 상태를 담고 있는 state가 변경될 때 실행하며, 자식들도 리렌더링 됨. (React 문서 참고)

 

---

 

IoC(Inversion of Control, 제어의 역전)

• 소프트웨어의 실행 흐름을 개발자가 직접 제어하지 않고, 프레임워크나 라이브러리가 대신 제어하는 디자인 패턴
• React는 IoC 개념을 적용하고 있음.

제어의 역전이란 말만 보면 어려울 거 같지만 막상 해보면 그렇지 않다.

 

예시 코드를 확인해보자.

// 예시 1)
const button = document.getElementById('eventButton');

const clickHandler = () => {
  alert('버튼 클릭됨');
}

button.addEventListener('click', clickHandler);

button.removeEventListener('click', clickHandler);

// 예시 2)
function Button() {
  const handleClick = () => {
    alert('버튼 클릭됨');
  }

  return (
    <button onClick={handleClick}>
      Click
    </button>
  );
}

예시 1번은 전통 방식이라 할 수 있다.

개발자가 직접 요소를 선택해서 이벤트를 추가하고, 이벤트 발생 시 실행될 동작을 정의해야 한다.

그리고 이벤트가 해제되어야 할 시점에 이벤트를 지워주는 코드가 필요하다.

 

예시 2번은 React이다.

개발자가  버튼을 어떻게 동작하게 할지 정의만 하고, React가 내부적으로 이벤트를 관리하고 실행 시점을 결정하는 것을 알 수 있다.

내부적으로 이벤트를 바인딩하고 관리하기 때문에 개발자가 직접 DOM을 조작할 필요가 없다.

이벤트 해제는 unmount되면 자동으로 정리된다.

 

 

끝!