React와 SPA 그리고 Component

 

들어가며

이제는 Front 라이브러리의 대세가 되어버린 메타의 React.js입니다. 이미 수많은 서비스에서 React를 도입하고 사용하고 있으며 컴포넌트 기반과 강력한 선언형 프로그래밍을 갖춘 라이브러리입니다. 제 경우는 DOM을 직접 조작하고 다루는 javascript 개발 방식도 무리는 없습니다. 그렇게 복잡하고 큰 사용자 UI 환경을 갖춘 프로젝트가 아니기 때문입니다. 하지만 대규모 프로젝트에서는 효율적으로 코드를 관리하고, 컴포넌트 기반 UI 개발을 지원하는 프론트엔드 프레임워크(라이브러리)가 필요하다보니 React가 꽤나 주목받았을 거라 생각합니다.

 

React만의 특징

1. 컴포넌트 기반

Ui를 작은 단위로 쪼개서 작성한다는 부분이 큰 장점이 됩니다. 컴포넌트 단위로 UI를 조작하다보니 재사용성과 유지보수성이 매우 높습니다. 그리고 많은 개발자와 기업체에서 이미 잘 만들어놓은 UI Component tool을 제공하다보니 더욱 React 개발이 활성화된다는 점도 있습니다.

2. Virtual DOM

리액트는 Virtual DOM을 통해 재사용이 필요한 기능을 언제든지 필요한 곳에서 호출하여, 반복적인 코드 작성 없이 사용할 수 있도록 해줍니다. Virtual DOM은 실제 DOM을 조작하지 않고 가상의 환경에서 먼저 상태 변화를 반영 후 실제 DOM에 최소 변경사항만 적용하는 방식입니다. 이로써 불필요한 DOm 연산이 감소하며 렌더링 성능은 향상합니다.

3. 선언형 프로그래밍(Declarative UI)

UI를 어떻게 변경할지가 아니라 상태에 따라 어떤 모습일지로 정의합니다. 이 부분은 기존 객체지향에 익숙하던 개발자가 함수형 프로그래밍을 만났을 때와 유사합니다. 객체의 속성, 인스턴스를 통해 어떤 동작을 구현한다기 보다는 현재 이루어진 컴포넌트의 상태(State)를 관리하면 React가 알아서 화면을 업데이트해주는 방식입니다. 직접 DOM을 조작하는 방법은 UI를 어떻게 변경할지 고민하는 일반적인 사고방식이라면, React에서는 상태를 잘 관리해주어야 합니다. 이 부분이 React를 처음 접하는 분들에게 넘어야될 산이 될 수도 있겠네요.

4. 단방향 데이터 흐름

부모에서 자식 컴포넌트로만 데이터가 전달되는 특징이 있습니다. 이를 props라는 인자를 통해 전달하죠. 단방향 데이터 흐름 방식은 컴포넌트간 데이터 흐름이 명확해지고 디버깅이 용이하다는 장점이 있습니다.

 

SPA

SPA(Single Page Application)은 서버에서 HTML을 생성하고 브라우저는 출력하기만 하는 전통적인 형태가 아니라, 서버가 하던 대부분의 화면 구성 작업을 브라우저에서 처리하는 웹 애플리케이션 개발 방법입니다. 즉, SPA에서는 서버가 처리하던 HTML 생성부터 내비게이션 처리, 사용자 인증에 따른 분기처리, 검색 등을 JavaScript(또는 WebAssembly)로 처리하게 됩니다.

SPA로 작성된 서비스에 처음 접속하면 방대한 양의 JavaScript를 내려받게 되며, 이후에는 JavaScript가 필요한 웹페이지를 동적으로 생성하여 최소한의 정보만 반환합니다. React는 대표적인 SPA 개발을 위한 라이브러리입니다.

 

JSX & TSX

JSX는 'JavaScript XML'의 약자로, 자바스크립트(JavaScript) 코드 안에 HTML과 유사한 문법을 사용하여 UI를 쉽게 작성할 수 있도록 해주는 JavaScript의 확장 문법입니다. React에서 UI를 직관적이고 선언적으로 표현하기 위해 사용하며, 브라우저에서 직접 실행할 수는 없기 때문에 바벨(Babel)과 같은 트랜스파일러를 통해 일반 자바스크립트 코드로 변환되어 실행됩니다. TSX는 'TypeScript XML'의 약자로, 대부분의 모던 리액트는 TSX를 사용합니다. 따라서 React Component를 담는 파일들은 OOOO.tsx 확장자를 갖게 됩니다.

function App() {
  return (
    <div>
      <h1>Hello React</h1>
      <p>React 시작하기</p>
    </div>
  );
}

HTML로 보이지만 실제로는 JS입니다. return(...)안의 JSX는 React.createElement로 변환됩니다. 중괄호 {}안에는 JS 표현식이 들어갈 수 있습니다.

function Header() {
  return <h1>My Blog</h1>;
}

function Content() {
  return <p>오늘은 React를 배워봅시다.</p>;
}

function App() {
  return (
    <div>
      <Header />
      <Content />
    </div>
  );
}

React 코드를 볼 때 다음과 같이 생각하면 좋습니다.

1. 컴포넌트 함수 이름 → 어떤 UI 조각인지 확인
2. JSX 구조 → 어떤 HTML 태그로 렌더링되는지 확인
3. state → 값이 변하면 어떤 부분이 다시 그려지는지 추적
4. props → 부모에서 어떤 값이 내려오는지 확인
5. 이벤트(onClick, onChange 등) → 상태 변화를 어떻게 일으키는지 확인

 

개발환경 실행

1. CRA(Create React App)

CRA는 리액트에서 지원하는 기본 템플릿입니다.

npx create-react-app my-app
cd my-app
npm start

2. Vite

Vite는 빠른 빌드 도구로 최근 많이 쓰이며, 실무 Production 환경에서 자주 빌드 및 운영됩니다.

npm create vite@latest my-app
cd my-app
npm install
npm run dev

 

 

React와 연관되는 프레임워크 or UI Tool

React를 꼭 사용해야하는 것은 아닙니다. 하지만 React를 사용함으로써 얻는 이득이 많기 때문에 많은 사람들이 UI 라이브러리로 React를 선택하는 것 같습니다. 그리고 React를 사용하는 대표적인 프레임워크로 Vercel의 Next.js가 있으며 오픈소스인 Remix가 있습니다. 이런 프레임워크는 풀스택 프레임워크를 지향하며 SSR(서버 사이드 랜더링) 방식도 같이 지원합니다. 제 생각에는 UI 라이브러리로 React는 필수이며 프레임워크는 사용 목적에 맞게 선택(or 선택안함)하면 좋을 것 같습니다.

UI Tool은 대표적으로 Material UI가 있으며 요즘에는 shadcn ui를 많이 사용하는 것 같습니다. UI Tool은 모던한 스타일로 미리 만들어 놓은 Component를 가져와 사용할 수 있기 때문에 직접 CSS를 만져서 스타일링하지 않아도 된다는 장점이 있습니다. 저도 UI Tool을 사용하려고 보니까 React는 필수라서 React를 사용하고 공부하면서 포스팅하게 되었습니다. 다음시간에는 좀 더 깊게 들어가죠. React의 State Hook과 이벤트 핸들링, 그리고 실전 예제까지 살펴보겠습니다!