리액트를 사용하는 이유?

김철준·2023년 3월 9일
0

REACT

목록 보기
25/33

프론트엔드 개발을 할 때 vanilla.js를 사용하여 개발하면 되는데 왜 굳이 react라는 프레임워크를 설치하여 사용할까?

유저에게 더 나은 UX를 제공하고 개발자가 코드를 편리하게 관리할 수 있도록 하기 위해서이다.

웹 생태계가 발전함에 따라, 웹 서비스의 규모가 커질수록 더 나은 UX를 고려하고 효율적으로 코드를 관리하는 방법이 필요했다.

때문에 그러한 방법으로 여러 프레임워크가 탄생했고 프론트엔트 생태계에서 가장 사용하고 있는 프레임워크가 리액트이다.

리액트를 사용하면 얻는 많은 장점들이 있겠지만 react를 사용하는 이유를 꼽자면 다음과 같다.

  • 컴포넌트 사용
  • 라우팅
  • state
  • virtual dom

컴포넌트

UI의 재사용성

컴포넌트를 사용한다면 반복해서 사용하는 UI를 컴포넌트화하여 코드량을 줄일 수 있고 효율적으로 관리할 수 있다.

특정 UI를 한 페이지내에서 반복해야하고 또 다른 페이지에서도 사용한다고 가정해보자.

html,css,javascript를 활용하여 구성한다면 각 UI에 대한 html 코드를 직접 일일히 짜는 방법을 쓰거나 javascript를 사용하여 UI에 대한 element를 만드는 방법이 있을 것이다.

이는 같은 UI에 대한 코드를 반복해야하므로 코드가 길어지게 되고 코드의 변경사항이 있을 때 이를 반영하기 위해서 모든 코드를 수정해야한다.
즉, 유지보수하는데 번거로움이 있을 수 있다.

하지만 리액트는 특정 UI에 대하여 쉽게 컴포넌트화를 할 수 있다.

그러므로 특정 UI를 반복하여 사용할 상황이 있을 경우 하나의 컴포넌트만 설계하여 재사용하면 된다.

또한 변경사항이 있을 때 해당 컴포넌트만 수정해주면 되기 때문에 효율적으로 유지보수 관리를 할 수 있다.

서비스를 컴포넌트 단위로 체계적 설계

컴포넌트를 사용하면 UI를 명시적으로 표현할 수 있고 서비스에 대한 전체적인 UI를 체계적으로 설계할 수 있다.

아래와 같이 하나의 페이지가 있다고 가정해보자.
MainPage.jsx

const MainPage = () => {
  return <>
    <Header/>
    <Content/>
    <Footer/>
    </>
}

MainPage는 3개의 컴포넌트로 구분되어있다.
<Header/>컴포넌트는 페이지의 최상단 UI에 관련한 컴포넌트이고
<Content/>컴포넌트는 페이지의 내용 역할을 하는 UI 컴포넌트이며
<Footer/>컴포넌트는 페이지의 맨 아래의 내용을 관리하는 UI 컴포넌트이다.

위처럼 페이지에 대한 각 역할에 따른 컴포넌트를 구분해주어 UI의 역할을 명시적으로 표현해줄 수 있다.

또한 서비스를 컴포넌트 중심으로 최상위 컴포넌트부터 하위 컴포넌트까지 만들어 이를 조립해 체계적으로 UI를 설계할 수 있다.

라우팅

리액트에서는 react-router-dom이라는 라우팅 라이브러리를 통하여 웹페이지의 주소를 변경했을 때 화면이 부드럽게 전환될 수 있게 해준다.

html,css,javascript를 사용하여 한 서비스내에 여러 라우팅를 하기 위해서는 각 경로마다 여러 개의 html이 필요할 것이다.

또한 각 경로전환시마다 서버로부터 요청하여 새로운 정적파일들을 받아와야한다.
서버로부터 새로운 화면을 렌더링해야하기 때문에 화면은 깜빡이게 된다.

이는 사용자에게 좋지 않은 경험을 겪게 할 수 있다.

물론 javascript의 ajax를 사용하면 깜빡이지 않도록 구현할 수 있다.
하지만 이를 구현하기에는 코드가 복잡해진다.

리액트에서는 각 경로를 변경할 때마다 화면이 깜빡이게 되지않고 해당 경로에 대한 html을 따로 구성하지 않아도 된다.

이는 내부적으로 ajax처리가 되기 때문에 서버에 요청하지 않고 경로에 해당하는 js파일을 렌더링해주기만 하면 된다.

즉, 리액트를 사용하면 화면전환시 사용자에게 깜빡임을 겪게 하지 않고 부드럽게 화면을 전환하게 할 수 있다.

state

react의 state는 데이터 변경에 따라 데이터를 화면에 즉각적으로 반영하게 해준다.

특정 데이터를 일반 변수에 할당하여 사용한다면 해당 변수를 변경한다고 했을 때 이는 즉각적으로 화면에 반영되지않는다.

하지만 리액트에서는 state를 사용함으로서 state가 변경될 때마다 state를 사용하는 컴포넌트가 리렌더링되게 해주어 변경사항을 즉각적으로 반영하게 해준다.

virtual Dom

리액트는 가상 DOM을 사용하여 UI 업데이트의 성능을 최적화한다.
이를 통해 실제 DOM 조작을 최소화하고, 변경된 부분만 업데이트한다.

일반 dom 같은 경우에는 javascript 하나의 element의 변경사항이 있어도 전체에 대한 부분이 리렌더링된다.

하지만 virtual dom 같은 경우에는 변경사항이 있는 부분만 리렌더링되게 해주어 효율적으로 dom을 업데이트할 수 있다.

마무리

react가 없이도 vanilla.js로 리액트와 같이 구성할 수 있다.

하지만 리액트의 모든 특성들을 vanilla.js로 구현하려면 구현 코드가 장황해지고 이를 유지보수하기 힘들다.

때문에 우리는 이러한 기능을 쉽게 사용하기 위해 리액트와 같은 프레임워크를 사용하는 것이다.

profile
FE DEVELOPER

0개의 댓글