[React] 왜 리액트인가?

Yunhye Park·2023년 11월 1일

지식 습득

목록 보기

8/11

프론트엔드 웹 개발자 채용공고를 쭉 훑어봤을 때 react가 자격요건에 없는 경우는 거의 보지 못했다. 그만큼 한국 웹 개발 시장에서 react는 거의 절대적인 존재로 여겨지는 듯하다. 다음 공부 방향을 react 배우기로 결정하며 리액트 강의를 새로 신청했다. 그러면서도 내심 궁금했다. Vue, Angular 같은 대안이 있는데 왜 사용 비율은 압도적으로 react가 높을까?

그 이유는 곧 리액트의 특징일 거다. 새로운 기술을 배우기 전에 이 기술이 어떤 것인지 알아야 제대로 사용할 수 있다. 리액트 강의의 첫 주제도 왜 리액트를 사용하는지에 대한 이야기였던 만큼, 개괄적으로 정리해 보고자 포스팅을 남겨본다.

리액트는

1. SPA(Single Page Application)

단 하나의 html 페이지(파일) 안에서 모든 상호작용이 이루어진다. 이게 무슨 장점이 있을까? 브라우저에 html 파일을 보여주기 위해서는 렌더 과정을 거친다. 렌더는 꼭 티가 난다. 아주 잠깐이나마 흰 화면이 먼저 뜨고, 이후에 body가 채워지니까.

그런데 리액트 기반으로 만든 웹사이트는 하나의 화면이 물 흐르듯 매끄럽게 연결된다. 마치 모바일 어플리케이션을 사용하는 것처럼.

웹 서비스에서 로딩 시간은 무척 중요하다. 2012년에 아마존 엔지니어가 연구한 바에 따르면, 로딩이 1초 지연될 시 매출의 10%가 감소했다고 한다. 모바일 어플리케이션이 이제 막 발전하던 당시에도 여파가 컸는데 하물며 지금 끼치는 영향력은 어떨까. 결국 사용자가 웹 서비스에 오래 머무를수록 서비스 제공자가 이득을 얻어가는 구조이기에 편의성을 최대한 제공할 수 있는 방향으로 툴을 선택해야 한다.

그나저나 html 파일이 하나라는데 다양한 요소들은 어떻게 추가되는 걸까? 여기서 다음 특징이 나온다.

2. 가상 DOM의 자동 재렌더링

정적(static)인 html 파일을 동적으로 만들 때에 자바스크립트가 쓰인다. 트리 구조로된 DOM(Documnet Object Model)을 이용해 html 요소에 접근하고, 사용자의 동작이나 특정 상황에 따라 조작하는 식으로 말이다.

그런데 작고 사소한 변화가 있을 때마다 파일을 렌더링 한다고 생각해보자. 그럼 html 파일이 하나든 열 개든 상관 없이 동작을 할 때마다 화면 전체에 영향이 가해진다.

리액트는 이 문제를 해결하고자 가상 DOM을 도입했다. 이는 실제 DOM을 복제한 거다. 원본인 DOM과 복제된 DOM을 비교해 달라진 부분만 반영한다. 변화가 생긴 부분만 동작하기에 성능 면에서 훨씬 나아진다.

여기서 한 걸음 더 나아가, 부분 랜더링을 자동으로 처리할 수 있다면 어떨까? 작성할 코드가 급격히 줄어들 테고 그만큼 코드 관리가 쉬워진다. 비용 면에서도 절약할 수 있고. 그래서 리액트에는 state라는 특별한 변수가 존재한다.

state는 배열로 식별자를 설정한다. 예를 들어 버튼 클릭 시 숫자가 1씩 증가하는 이벤트를 구현하려고 할 때 이렇게 작성한다.

import { useState } from 'react'; // state 사용하기

const [ count, setCount ] = useState(0); // state 초기값 설정

function App () {
  return (
      <button onClick={() => { setCount(count+1)} }>증가</button>
      )
}

처음에 담기는 값(0)은 초기값이다. 이 값을 변경하려면 html에 접근할 생각을 하는 게 아니라, 배열의 두번째 요소(setCount)를 사용하면 된다. 함수 호출하듯 매개인자로 설정할 값(setCount(count+1))을 작성하면 가상 DOM과 원본 DOM의 차이를 비교한 후, 달라진 부분만 다시 랜데링 해준다.

이 과정을 스위치 똑딱이는 것에 비유해 볼 수 있다. 방에 불을 켤 때 직접 전구나 LED를 열어 볼 생각할 사람은 없을 거다. 해당 기능은 스위치에 연결되어있으니, 어떤 스위치를 어떻게 누를지만 고민하면 된다.

3. JSX 문법

앞서 count 값을 변경할 때 코드르 보면 count += 1로 작성하지 않았다. 이는 리액트 문법이 아니다. 리액트는 마크업 언어인 JSX를 함께 사용하여 랜더링한다.

JSX는 html와 거의 똑같다. 다만 camelCase로 html 태그의 속성을 설정하고, 변수나 함수를 중괄호{} 안에 넣는 등의 차이가 있다.

4. Component

웹 사이트는 필연적으로 반복되는 구성이 나온다. modal이나 card처럼 말이다. 다시 사용할 데이터는 변수에 저장하듯 함수는 재사용할 기능을 한방에 묶어서 코드 효율성을 높인다.

리액트에서는 함수 꾸러미가 컴포넌트다. 웹 사이트에 있는 요소 하나하나를 컴포넌트로 묶어서 원하는 위치에 원하는 개수만큼 자유롭게 UI를 디자인 할 수 있다. 그런데 특정 부분뿐만 아니라 페이지 전체를 컴포넌트로 만들 수도 있다.

그렇다고 모든 요소를 컴포넌트로 만들 필요는 없다. 언제나 목적에 맞게 사용해야 하니까. 화면에서 자주 변경되거나 재사용할 html을 뭉친 컴포넌트는 꽤 유용하게 쓰일 것 같다.

그외의 이야기

리액트를 많이 사용하는 이유를 찾다보니 장점 위주로 특징을 이야기했지만, 세상 어디든 좋은 것으로만 가득한 건 없다. 리액트의 문법이 오히려 사용을 어렵게 한다는 의견도 있고, SPA라서 검색엔진 최적화가 어려우므로 사용을 꺼려한다는 주장도 보았다. (하지만 많은 곳에서 사용 중인 거 보면 SEO를 보완할 방법도 있을 것 같다.)

무엇이 옳은 선택이라고 말할 순 없지만, 좋고 나쁨은 충분히 경험한 후에 판단해도 늦지 않다는 생각이다.