[React - 1] 리액트의 특징

가장 많이 사용하는 프론트엔드 프레임워크는 당연 리액트입니다. 프론트엔드 개발영역이 크지 않던 시절엔 프론트엔드 구인 광고에는 약 70% 이상이 리액트 개발자를 원하고 있습니다. 리액트는 어떤 이유로 가장 인기있는 프레임워크가 되었을까요? 이번 포스팅에서는 리액트의 장단점을 알기위해 리액트의 특징에 대해 알아보겠습니다.

선언형 프로그래밍

프론트엔드 개발자는 html + css로 사용자에 눈에보이는 웹 페이지(DOM)를 만들고, javascript를 통해 DOM을 조작하는 개발자입니다. React 이전에는 DOM을 조작하기 위해서 Document API나 Jquery를 통해 조작할 DOM을 검색하고 내용을 조작하였습니다.

const elem = getDocumentById('someDOM');
elem.style.color = 'blue'

위의 코드 처럼 Document를 id나 class와 같은 식별자로 가져온 다음 DOM의 속성을 직접 변경하였습니다. 이러한 개발 방식은 직관적임으로 javascript가 어떤식으로 DOM을 조작하는지 볼 수 있다는 장점이 있지만 개발의 범위가 넓어 질 수록 코드를 관리하기 어렵다는 단점이 있습니다. 예를 들어 로그인을 하였을때 툴바에서 사용자 프로필을 바꾸고 선택가능한 메뉴를 바꾼다고 하면 이런식의 코드가 될 것입니다.

ajax.get('/users/me', (res) => {
  const profile = getDocumentById('profile');
  profile.src = res.profileURl;
  
  const menues = getDocumentById('menues');
  menues.innerHTML = '
  	<div> 새로운 메뉴 버튼과 HTML.... </div>'

innerHTML 이하의 코드는 생략했지만 굉장히 복잡한 HTML이 들어 갔을 것입니다.
만약에 사용자 로그인 여부에 따라서 '글 생성'과 같은 버튼까지 넣어야 한다면 코드는 정말 끔찍해 질 것입니다.

이러한 문제를 해결하기 위해서 React의 javascript에서 직접 DOM을 조작하는 방식을 버리고 데이터가 변경될때 렌더링을 바꾸는 방식을 채택하였습니다. React에서 DOM을 조작하려면 먼저 새로운 state(변경 시 랜더링하는 데이터)를 선언하고, React에서 HTML Document 역할을 하는 JSX에 state를 사용해서 내용을 랜더링 합니다. 만약 state가 변경된다면 JSX도 변경 사항에 맞춰 화면을 랜더링 해줍니다.

const Toolbar = () => {
  const [user, setUser] = useState(null);
  
  return () => (
    <Profile user=user>
    <Menues user=user>
  )
}

const Profile = (props) => {
  const defaultImg = '/defaultProfile.png';
  return () => {
    <div>
      <img src = {props.user ?  user.profileUrl : defaultImg }/>
    </div>
  }
}

const Menues = (props) => {
  <div>
    {props.user ? <LogoutButton/> : <LoginButton/> 
  <div>
}

React에서 개발하게되면 위의 예제가 이런식으로 변경이 됩니다. 어떤 state를 사용하는지 Toolbar에 정의해 주었고, 하위 컴포넌트에서는 state를 props로 받아 해당 props에 따라 랜더링을 해줍니다. JSX에서는 { } 안에서 변수나, 삼항연산자 등을 사용할 수 있습니다. 위에 예제에서는 props 아래에 user를 이용해 삼항연산자를 사용하였습니다.

동작이 중심이 되서 개발하였던 기존 Document API는 어떻게 랜더링 할지가 랜더링이 되는 시점에 모여져 있다면, React는 실제로 랜더링하는 곳에 어떻게 랜더링 해야할지가 담겨있습니다. 그리고 set함수를 통해 내용을 변경한다면 하위 컴포넌트까지 전부 다시 랜더링이 되겠죠. 이를 통해 서로 상관없는 컴포넌트들을 분리해서 관리 할 수 있으며, 동작과 랜더링 로직을 분리 하기 쉽습니다.

React를 개발할 때는 어떻게 데이터를 조작할지에 초점을 맞추는 것이 아니라 미리 state에 따라 어떻게 랜더링 되는지 선언해주는 방식으로 개발을 합니다. 이러한 프로그래밍 방식을 선언형 프로그래밍 방식이라 합니다.

Virtual DOM

React를 사용하는 또 다른 이유 중 하나는 Virtual DOM 입니다. DOM을 직접 조작해서 랜더링을 하면 별거 아닌 일처럼 느껴지지만 실제로는 브라우저가 Document Tree에서 변경하려는 DOM을 찾고 다시 위치를 계산해서 다시 랜더링 하는 과정을 거칩니다. 이 과정 때문에 랜더링이 잦아질 경우 작은 어플리케이션일 지라도 매우 느려질 수 있습니다.

React는 이러한 문제를 해결하고자 Virtual DOM이라는 것을 만들었습니다. Virtual DOM은 실제 브라우저에 랜더링하기 전에 사용하는 DOM으로 랜더링이 갱신 될 경우 미리 랜더링을 해주는 역할을 합니다. 리 랜더링 된 Virtual DOM을 보고 실제로 어떠한 부분이 바뀌었는지 계산한 후, Brower에 최종 결과만 랜더링 합니다. 이를 통해서 재 랜더링되는데 드는 비용을 줄여 재 랜더링에 대한 부담을 줄이고 속도를 증가 시켰습니다.

컴포넌트 기반 개발

기존 HTML의 경우 별도의 랜더링 프레임워크를 사용하지 않으면 js 변수에 string으로 html을 저장해서 사용해야 할 만큼 재사용성이 매우 안좋았습니다. React에서는 이러한 문제를 해결하고자 동작과 Rendering을 할 수 있는 최소 단위인 Component를 만들었고, 한번 정의 한 컴포넌트는 여러 곳에서 재사용 할 수 있게 만들었습니다. 많이 사용하는 컴포넌트는 미리 만들어서 재사용을 하죠. 기존에 프론트엔드 개발이 페이지 위주의 개발이었다면 React에서는 컴포넌트 위주의 개발을 하고 그 후에 여러 컴포넌트를 페이지에 배치하는 느낌이 더 강합니다.

컴포넌트를 만들 기 쉬워, 리액트에서는 컴포넌트를 제공하는 많은 라이브러리가 있습니다. 대표적인 컴포넌트 라이브러리가 Material과 Ant Design이죠. 이렇게 라이브러리 생태계가 활발하게 있을 수 있는 이유도 리액트의 컴포넌트 시스템 덕분입니다.

오늘은 리액트의 특징에 대해서 알아보았습니다. React를 개발하는데 알아야하는 JSX, Hook등의 꼭 필요한 지식에 대해서 앞으로 하나씩 정리해 나아갈 생각입니다. 감사합니다.

About Couchcoding

카우치코딩에서는 1:1 코딩 문제해결 멘토링 서비스입니다. 가르치는데 관심있는 멘토분들이나 문제해결이 필요한 멘티분들 방문해주세요~
또한 별도로 6주 포트폴리오 수업을 진행중에있습니다. 혼자 포트폴리오 준비를 하는데 어려움이 있으면 관심가져주세요~