78 / 100

SEO Score

글에 포함된 내용들

Shopify 앱 개발을 위한 React 기초 완전 정리

Shopify 앱 개발을 위한 React 기초 완전 정리

Shopify 앱을 개발하려면 여러 가지 기술이 필요하지만, 그중에서도 화면을 구성하고 데이터를 표시하는 데 가장 중요한 기술이 바로 React입니다.
React는 전 세계 수많은 웹사이트들이 사용하는 프론트엔드 라이브러리이며, Shopify도 자체 UI 툴킷인 Polaris를 React 기반으로 만들었기 때문에, 앱 개발에 있어 React는 사실상 필수입니다.

하지만 React는 처음 접하는 사람에게는 어렵게 느껴질 수 있습니다. HTML과 비슷해 보이지만 다르고, 자바스크립트 같으면서도 새로운 문법이 많기 때문입니다.
이 글에서는 Shopify 앱을 개발하는 데 꼭 필요한 React의 핵심 개념과 문법만 정리하여, 하나의 글에서 완전히 이해할 수 있도록 안내드리겠습니다.

React란 무엇인가요?

React는 페이스북(메타)이 만든 오픈소스 JavaScript 라이브러리로, 복잡한 웹사이트의 화면을 효율적으로 만들기 위해 사용됩니다.
기존에는 HTML, CSS, JavaScript를 따로 작성했지만, React는 이 모든 것을 컴포넌트라는 단위로 묶어서 재사용 가능한 UI 조각으로 만들 수 있습니다.

예를 들어, 상품 하나를 보여주는 카드 화면을 만든다면 React에서는 다음처럼 작성할 수 있습니다.

function ProductCard() {
  return (
    <div>
      <h2>iPhone 15</h2>
      <p>₩1,500,000</p>
    </div>
  );
}

이렇게 만든 ProductCard는 쇼핑몰 안에서 여러 번 재사용할 수 있는 UI 컴포넌트가 됩니다.

Shopify 앱에서 왜 React가 필요한가요?

Shopify 앱은 Shopify Admin 화면 안에서 실행되며, 이를 Embedded App이라고 부릅니다.
이 Embedded App 안에서 우리가 만든 화면이 Shopify의 디자인과 자연스럽게 어울리게 하려면 Polaris 컴포넌트를 사용해야 합니다.

Polaris는 전부 React로 구성되어 있어서, Polaris를 쓰기 위해서는 React 문법을 이해하고 있어야 합니다.
따라서 Shopify 앱 개발자는 React 문법을 기본적으로 숙지해야 합니다.

React에서 꼭 알아야 할 기본 문법과 개념

JSX – HTML과 JavaScript의 만남

React에서 사용하는 문법은 JSX라고 불리며, HTML처럼 보이지만 그 안에 JavaScript 코드를 섞어 쓸 수 있는 형식입니다.

const name = "jay";
return <h1>Hello, {name}</h1>;

중괄호 {} 안에는 변수, 계산식, 함수 호출 등을 자유롭게 넣을 수 있습니다.

컴포넌트 – 화면의 최소 단위

React에서는 모든 화면 요소를 컴포넌트라는 단위로 나누어 만듭니다.
컴포넌트는 함수 형태로 작성하며, 이름은 반드시 대문자로 시작합니다.

function Welcome() {
  return <h2>Welcome!</h2>;
}

이렇게 만든 컴포넌트는 <Welcome />처럼 태그처럼 사용해서 화면에 표시할 수 있습니다.

Props – 컴포넌트에 값 전달하기

컴포넌트에 값을 전달할 때는 props라는 메커니즘을 사용합니다.

function Greeting(props) {
  return <h3>안녕하세요, {props.name}님!</h3>;
}

// 사용 예시:
<Greeting name="Jay" />

props는 컴포넌트를 재사용하면서 각각 다른 값을 넣을 수 있도록 해주는 역할을 합니다.

useState – 화면 상태 저장하기

useState는 버튼 클릭, 입력 등으로 값이 바뀌는 경우에 상태를 저장해주는 기능입니다.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 숫자: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

위 예제처럼 버튼을 누르면 숫자가 증가하도록 만들 수 있습니다.

useEffect – API 호출이나 타이밍 제어

useEffect는 컴포넌트가 처음 화면에 나타날 때, 혹은 특정 값이 바뀔 때 실행되는 함수입니다.
보통 Shopify API로 데이터를 불러올 때 사용됩니다.

import { useEffect, useState } from 'react';

function Products() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch("/api/products")
      .then(res => res.json())
      .then(data => setProducts(data));
  }, []);

  return (
    <ul>
      {products.map(p => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}

[]를 넣으면, 이 코드는 컴포넌트가 처음 실행될 때 한 번만 동작합니다.

이벤트 처리 – 사용자 동작을 반영하기

버튼 클릭, 입력 값 변경 등의 사용자 동작에 반응하려면 이벤트 처리를 해야 합니다.

function Form() {
  const [text, setText] = useState("");

  return (
    <input
      value={text}
      onChange={(e) => setText(e.target.value)}
    />
  );
}

onChange, onClick 같은 속성을 통해 동작을 지정할 수 있습니다.

조건부 렌더링 – 상황에 따라 다르게 보이기

조건에 따라 다른 컴포넌트를 보여주고 싶을 때는 삼항 연산자 또는 논리 연산자를 사용합니다.

{isLoggedIn ? <Dashboard /> : <LoginForm />}

반복 렌더링 – 목록 보여주기

배열 데이터를 화면에 반복해서 표시할 때는 .map()을 사용합니다.

const items = ['사과', '바나나', '포도'];

return (
  <ul>
    {items.map((item, index) => <li key={index}>{item}</li>)}
  </ul>
);

각 항목마다 고유한 key 값을 넣어주는 것이 중요합니다.

Polaris와 함께 쓰는 React

Shopify에서 제공하는 Polaris 컴포넌트들은 모두 React 기반이므로, 위에서 배운 문법들을 그대로 적용할 수 있습니다.

예를 들어 Polaris의 버튼을 사용하는 방식은 다음과 같습니다.

import { Button } from "@shopify/polaris";

function MyButton() {
  return <Button onClick={() => alert("클릭됨!")}>클릭하세요</Button>;
}

React 문법 정리

개념/함수	예제	설명
JSX	<h1>Hello, {name}</h1>	HTML처럼 보이지만 자바스크립트 코드와 섞을 수 있는 React 전용 문법입니다. 중괄호 {} 안에 변수나 표현식을 넣어 사용할 수 있습니다.
컴포넌트 함수	function Hello() { return <h1>Hello</h1>; }	React에서는 UI를 컴포넌트 단위로 나누어 함수처럼 정의합니다. 이름은 대문자로 시작해야 하며 JSX를 반환합니다.
화살표 함수 (=>)	const Hello = () => <h1>Hello</h1>;	화살표 함수는 함수를 간단히 표현하는 방법입니다. `=>`는 ‘이 값을 반환한다’는 의미입니다.
useState	const [count, setCount] = useState(0);	상태(state)를 저장하고 바꿀 수 있도록 해주는 React 훅(hook)입니다. 배열 구조 분해를 통해 값과 업데이트 함수를 동시에 얻습니다.
useEffect	useEffect(() => { console.log(‘렌더링됨’); }, []);	컴포넌트가 렌더링될 때 실행되는 함수입니다. 빈 배열([])을 넣으면 컴포넌트가 처음 나타날 때 한 번만 실행됩니다.
props	function Greeting(props) { return <h1>{props.name}</h1>; }	컴포넌트에 값을 전달할 수 있는 방식입니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 내려줍니다.
이벤트 핸들링	<button onClick={() => alert(‘clicked’)}>Click</button>	onClick, onChange 같은 속성을 이용하여 사용자 동작에 반응합니다. 보통 화살표 함수를 사용합니다.
조건부 렌더링	{isLogin ? <Home /> : <Login />}	조건에 따라 다른 컴포넌트를 화면에 표시합니다. 삼항 연산자(?)를 사용합니다.
리스트 렌더링	{items.map((item) => <li>{item}</li>)}	배열 데이터를 반복해서 보여줄 때 사용하는 문법입니다. map 함수를 이용합니다.
key	<li key={index}>{item}</li>	리스트 렌더링 시 React가 각 요소를 구분할 수 있도록 고유한 값을 지정해야 합니다.

결론: React는 Shopify 앱 개발의 핵심입니다

처음 React를 접할 때는 문법도 낯설고, 구조도 복잡하게 느껴질 수 있습니다.
하지만 하나하나 개념을 이해하고, 작은 예제를 따라 만들다 보면 점점 익숙해집니다.

Shopify 앱은 단순히 화면만 만드는 것이 아니라, 데이터를 가져오고, 사용자 입력을 처리하며, Shopify 플랫폼과 연동되는 복합적인 웹 앱입니다.
React는 그 모든 흐름을 깔끔하게 구성해주는 중심 도구입니다.

Shopify 앱을 개발하고자 하는 분이라면, React는 반드시 익혀야 할 기술이며, 이 글을 통해 시작하신다면 그 첫 단추를 잘 끼우신 것입니다.

React 알아보기