VanillaJS를 사용하지 않는 이유

라이브러리나 프레임워크를 사용하지 않은 순수 JavaScript를 VanillaJS라고 한다. React에 비해 훨씬 가볍다는 장점이 있으나 대규모 애플리케이션, 복잡한 UI 개발 등에는 한계가 있으므로 작은 규모의 프로젝트에서 사용한다.

React는 어떤 점이 좋을까?

• 가상 DOM
  가상 DOM을 사용하여 렌더링을 최소화하고, 필요한 부분만 업데이트하여 렌더링 속도와 성능을 개선시킨다.

• 컴포넌트 기반
  컴포넌트 기반이기 때문에 코드를 조직화하고 협업하기에 유리하다. 또한 반복되는 컴포넌트를 재사용하면 코드량을 감소시킬 수 있다.

• JSX 문법
  HTML과 유사한 형태로 UI를 작성할 수 있으며 가독성이 좋다.

  JSX(JavaScript XML)
  자바스크립트의 확장 문법으로 리액트에서 컴포넌트 작성시 사용한다. HTML과 유사한 구문으로 작성할 수 있기 때문에 가독성과 편의성을 높여준다.

  const element = <h1>Hello, world!</h1>;

  JSX는 컴파일러를 통해 위와 같은 JSX코드를 아래와 같이 자바스크립트 코드로 변환한다.

  const element = React.createElement("h1", null, "Hello, world!");

  React.createElement() 함수는 첫 번째 인자로 태그 이름을 받고, 두 번째 인자로 속성(props)을 받는다. 세 번째 이후의 인자는 컴포넌트의 자식 요소를 나타낸다.

• 상태와 렌더링의 분리
  상태와 렌더링이 분리되어 있기 때문에 상태 변경에 따른 렌더링 로직을 최소화한다.

• 확장성
  다양한 라이브러리와 함께 사용이 가능하기 때문에 기능을 확장하고 개발 생산성을 높일 수 있다.

• 대규모 커뮤니티
  많은 프론트엔드 개발자들이 사용하는 프레임워크이므로 정보 접근성이 좋다.

• 유지 보수
  위에서 설명한 장점들때문에 유지 보수 측면에서 유리하다.

정리하자면 React는 복잡한 사용자 인터페이스 구축시 효율적이고 구조화 된 방식을 제공하기 때문에 인기 있는 프레임워크로 자리 잡았다고 할 수 있다.