React로 UI 만들기

코딩 코디네이터 2025. 4. 3. 08:00

2025. 4. 3. 08:00

React로 UI 만들기: 초보자를 위한 컴포넌트 설계 입문

여러분 혹시, "React는 어렵다"는 얘기 들어보셨나요? 🤔
그 말, 반은 맞고 반은 틀렸습니다.
이 글을 끝까지 보면 그 이유, 분명해질 거예요!

안녕하세요, 여러분 👋

오늘은 React로 UI를 만들기 위한 기초 개념부터 컴포넌트 구성, JSX 사용법, 그리고 직접 만들어보는 카드 컴포넌트 예제까지 아주 디테일하게 안내해 드릴게요.

제가 처음 React를 접했을 때 겪은 시행착오와 노하우도 함께 공유할 거니까, 끝까지 함께 해주세요! 😄

1. React UI란 무엇인가요? (기초 개념)

우선 React는 Facebook에서 만든 자바스크립트 기반의 UI 라이브러리예요.

HTML 파일을 자바스크립트로 조립하듯 만들어서, 더 빠르고, 더 직관적인 사용자 경험을 제공하는 데 초점이 맞춰져 있죠.

쉽게 말해, 웹사이트에 버튼 하나 추가하거나, 리스트를 동적으로 업데이트하는 기능을 만들고 싶다면 React만큼 강력한 툴은 드물어요.

📌 React UI의 핵심 개념

컴포넌트(Component): UI를 구성하는 최소 단위로, 독립적이고 재사용 가능한 블록입니다.
Virtual DOM: 변경 사항을 빠르게 반영해주는 React만의 효율적인 방식입니다.
JSX: HTML과 유사한 문법을 JavaScript 코드 안에 직접 작성할 수 있게 해줍니다.

🧐 그럼 왜 React UI가 중요한 걸까요?

1. 빠르고 효율적인 개발: 반복되는 UI 요소들을 컴포넌트로 만들어놓고 필요할 때마다 재활용할 수 있어요.
2. 실시간 반응성: 데이터가 바뀌면 자동으로 UI도 변하게 만들 수 있어요.
3. 유지보수 용이: 컴포넌트 기반이라 한 부분만 수정해도 전체 앱에 영향을 줄 수 있어요.

🌱 처음 접하는 초보자에게도 React는 좋은 선택일까?

물론이죠!

React는 처음에는 약간 헷갈릴 수 있지만, 한 번 구조를 익히면 이후 개발이 훨씬 쉬워져요.

저도 예전엔 "이걸 내가 할 수 있을까?" 싶었지만, 컴포넌트 한 개 만들어보고 나니 자신감이 붙더라구요.

초보자에게 React는 단순한 UI 툴이 아니라 프론트엔드 개발의 사고방식을 바꿔주는 계기가 될 수 있어요.

다음 단계에서는 React UI 개발이 왜 이렇게 각광받고 있는지 더 구체적인 이유들을 정리해 드릴게요. 😊

2. UI 설계에 React가 좋은 이유 ✨

React가 UI 개발에서 주목받는 이유는 그 자체가 사용자 경험을 위한 도구이기 때문이에요.

예쁘기만 한 UI보다, 빠르고 직관적인 상호작용이 가능한 UI를 만드는 게 더 중요하잖아요?

바로 이 지점에서 React가 강점을 발휘합니다.

💡 React가 UI 개발에 최적화된 이유

실시간 반응성 (Reactivity): 데이터가 바뀌면 자동으로 화면이 업데이트돼요.
컴포넌트 단위 설계: UI 요소를 블록처럼 쌓고 조립해서 만들 수 있어요.
Virtual DOM: 불필요한 렌더링을 줄여서 성능을 높여줘요.

🧠 비교: 전통적인 UI 개발 vs React

항목	전통적인 방식	React 방식
코드 구조	HTML/CSS/JS 분리	컴포넌트로 통합
재사용성	낮음	매우 높음
상태관리	전역 변수/이벤트 위주	useState, Context 등 구조화
UI 업데이트	수동 DOM 조작	자동 반응형 렌더링

제가 초기에 Vanilla JS만으로 UI를 관리했을 때, 한 줄 수정하면 두 줄이 깨지고 다섯 줄을 다시 써야 했던 기억이 나요. 😂

그런데 React로 바꾸고 나서는 마치 블록 조립하듯 UI를 만들 수 있었어요.

그 정도로 개발 효율성이 확 올라갑니다!

🚀 요약: React로 UI를 만들면 이런 점이 좋아요

초보자도 입문 가능! 이해하기 쉬운 컴포넌트 구조
빠르고 부드러운 UX를 자동으로 구현 가능
유지보수성 극대화: 기능 수정 시 전체 코드를 건드릴 필요 없음

이제 React가 단순히 “멋져 보이는 라이브러리”가 아니라 실제로 실무에서 왜 쓰이는지 이해가 되셨죠?

다음 챕터에서는 컴포넌트 구조의 비밀을 더 깊이 들여다볼게요. 🧩

3. 컴포넌트 구조와 장점 🔧

React의 핵심은 뭐니 뭐니 해도 컴포넌트(Component)입니다.

처음엔 낯설지만, 이 구조에 익숙해지면 복잡한 UI도 쉽게 관리할 수 있게 되죠.

마치 레고 블록을 조립하듯 화면을 만들어간다고 보면 돼요. 🎮

🧩 컴포넌트란 무엇인가요?

컴포넌트는 말 그대로 UI를 구성하는 독립적인 조각입니다.

이 조각들은 각자 자신만의 상태와 스타일, 동작을 가지고 있어서 수정·재사용이 쉬워요.

컴포넌트는 기본적으로 함수(function)나 클래스(class)로 만들어집니다.
보통은 함수형 컴포넌트 + 훅(Hooks)을 더 많이 사용합니다.

📌 컴포넌트 구조 예시

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

위 예제처럼 Header라는 컴포넌트를 하나 만든 다음,

메인 화면에서 <Header />처럼 태그로 불러와 쓰면 됩니다.

진짜 HTML 태그처럼 쓸 수 있다는 게 핵심이에요!

🧠 컴포넌트 기반 구조의 장점

장점	설명
재사용성	같은 UI를 여러 군데에서 반복해서 사용할 수 있어요.
유지보수 용이	한 군데만 수정해도 전체 동작에 영향을 줄 수 있어요.
테스트 편리성	각 컴포넌트를 독립적으로 테스트할 수 있어요.

React로 처음 프로젝트를 시작할 때는 무조건 "작게 쪼개기"부터 연습해보세요.

버튼, 카드, 폼 등 각 UI 요소를 개별 컴포넌트로 만들고, 필요한 곳에서 조합하는 게 핵심이에요.

처음엔 비효율적으로 느껴질 수 있어도, 프로젝트가 커질수록 "이래서 컴포넌트 구조가 필요했구나" 하고 깨닫게 될 거예요.

자, 이제 다음 챕터에서는 이 컴포넌트를 만드는 도구인 JSX에 대해 알아볼 차례입니다.

조금 헷갈릴 수 있지만, 설명은 진짜 쉽게 해드릴게요! 😎

4. JSX 제대로 쓰는 법 🧠

JSX는 JavaScript + XML의 줄임말이에요.

React에서 UI를 설계할 때 가장 많이 쓰는 문법이고, 익숙해지면 마치 HTML을 쓰듯이 JavaScript 안에서 UI를 그릴 수 있습니다. 🤓

📘 JSX의 기본 문법

JSX는 XML처럼 생긴 문법을 사용하지만, 사실은 전부 JavaScript 코드로 변환돼요.

그래서 HTML처럼 보이지만 완전히 같지는 않아요!

const element = <h1>Hello, JSX!</h1>;

이렇게 <h1> 태그를 마치 HTML처럼 직접 쓸 수 있다는 게 바로 JSX의 핵심이에요.

⚠️ JSX와 HTML의 차이점

class → className: JSX에서는 class 대신 className을 써야 해요.
닫는 태그 필수: <br />, <img /> 처럼 반드시 태그를 닫아야 합니다.

// HTML
<div class="box">Hello</div>

// JSX
<div className="box">Hello</div>

🔄 JSX에서 JavaScript 사용하기

JSX 내부에서는 { } 중괄호를 이용해 동적으로 데이터를 삽입할 수 있어요.

이게 진짜 React의 매력이죠!

const name = "React";

function Greeting() {
  return <h1>Hello, {name}!</h1>; 
}

// 결과: Hello, React!

🧠 JSX를 쓰면 뭐가 좋을까?

1. 직관적이고 읽기 쉬움: 마치 HTML처럼 보여서 비개발자도 이해 가능!
2. 동적 UI 구현에 탁월: 변수/함수/조건 등을 자유롭게 삽입
3. React 기능과 완벽 호환: Hooks, Props, State 등과 함께 자연스럽게 사용 가능

JSX에 익숙해지면 복잡한 동적 UI도 코드 몇 줄로 해결할 수 있어요.

자, 이제 실전으로 들어가 봅시다!

다음 단계에서는 컴포넌트를 어떻게 설계하고 나누는지 구체적인 패턴과 함께 살펴볼게요. 🔍

5. 컴포넌트 설계 원칙과 실제 예제 🎯

이제 컴포넌트를 어떻게 나누고 설계해야 효율적일까?에 대해 알아볼 시간입니다.

사실 이 부분에서 React의 진짜 힘이 드러나거든요! 🙌

🎨 컴포넌트를 잘 나누는 3가지 기준

① 단일 책임 원칙(SRP) — 하나의 컴포넌트는 하나의 역할만!
② 재사용 가능성 — 중복되는 구조는 컴포넌트로 빼세요.
③ 계층 구조 — 부모 컴포넌트와 자식 컴포넌트를 구분해서 설계하세요.

즉, "이 UI 블록을 다른 곳에서도 쓸 수 있을까?"

"이 기능은 따로 테스트 가능할까?"

이런 기준으로 쪼개기 연습을 하는 게 중요합니다.

👨‍💻 실제 예제: 사용자 프로필 컴포넌트

다음은 UserProfile이라는 상위 컴포넌트를 기준으로 3개로 나눠본 예제입니다.

function UserInfo({ name, email }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{email}</p>
    </div>
  );
}

function UserActions() {
  return <button>Send Message</button>;
}

function UserProfile({ user }) {
  return (
    <div>
      <UserInfo name={user.name} email={user.email} />
      <UserActions />
    </div>
  );
}

🧠 UserInfo: 사용자 이름과 이메일만 담당
📨 UserActions: 버튼 액션 담당 (확장 가능)
👤 UserProfile: 위 두 컴포넌트를 조합한 상위 컴포넌트

✅ 실무 팁: 이런 컴포넌트 쪼개기가 도움이 돼요

버튼, 카드, 텍스트 필드 같은 UI 요소는 전부 재사용 가능한 컴포넌트로 분리
로직과 뷰를 분리하면 유지보수가 쉬워지고, 테스트 코드 작성도 편해짐

React에서 컴포넌트는 UI의 최소 단위예요.

컴포넌트를 나눌 줄 알면 어느 순간부터 앱 전체가 블록처럼 느껴지기 시작할 거예요.

그게 바로 React의 묘미죠! 😄

이제 마지막! 다음 STEP에서는 이 모든 개념을 담은 실제 컴포넌트를 만들어보며 마무리할게요. ✨

6. 카드 컴포넌트 만들기 실습 💻

지금까지 배운 JSX, 컴포넌트 구조, 설계 원칙을 바탕으로 실전 예제를 만들어볼 시간이에요.

초보자에게 가장 추천하는 예제는 카드 컴포넌트입니다.

간단하면서도 핵심 개념이 모두 들어가 있거든요. 🎴

💡 목표: 두 개의 카드 컴포넌트를 렌더링하기

/* eslint-disable react/prop-types */

function App() {
  return (
    <div>
      <Card title="React Basics" description="Learn the basics of React." />
      <Card title="JSX Guide" description="Understand how JSX works." />
    </div>
  );
}

function Card({ title, description }) {
  return (
    <div style={{ border: "1px solid #ccc", padding: "16px", borderRadius: "8px", marginBottom: "12px" }}>
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

export default App;

📦 이 코드에서 확인할 수 있는 개념

props 사용: title, description이라는 데이터를 부모에서 자식 컴포넌트로 전달
스타일링: 인라인 CSS로 간단한 박스 형태의 카드 구현
컴포넌트 재사용: Card 컴포넌트를 여러 번 불러서 다른 데이터를 출력

🔐 propTypes를 사용해서 더 안전하게 만들기

import PropTypes from 'prop-types';

function Card({ title, description }) {
  return (
    <div style={{ border: "1px solid #ccc", padding: "16px", borderRadius: "8px" }}>
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

Card.propTypes = {
  title: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
};

propTypes는 타입 오류를 미리 막아줘요. 개발하면서 실수를 줄일 수 있어서 실무에선 거의 필수랍니다. 😎

▲ 카드 컴포넌트 출력 결과 (React)

이제 여러분도 직접 나만의 React 컴포넌트를 만들 수 있어요! 🎉

이번 실습을 시작으로 프로젝트에서 복잡한 UI를 다룰 수 있는 기반이 생겼다고 보셔도 됩니다.

📌 마무리 요약

컴포넌트는 작고 독립적으로 쪼개자!
JSX는 HTML처럼 보이지만 JavaScript 그 자체!
props와 propTypes로 데이터 전달과 안전성 확보!

이제 진짜 기초는 다 끝났어요!

이 글을 바탕으로 작은 프로젝트부터 시작해 보세요. 🏃‍♂️

📌 마무리

여기까지 따라오신 여러분, 정말 고생 많으셨어요! 🎉

이번 글에서는 React의 기본 개념부터 JSX 문법, 컴포넌트 설계, 카드 UI 실습까지 한 번에 쭉 훑어봤어요.

처음엔 어렵게 느껴질 수 있지만, 지금 당장 모든 걸 완벽히 이해하지 않아도 괜찮아요.

중요한 건 작은 단위의 컴포넌트를 만들고, 직접 사용해보는 경험을 꾸준히 쌓는 거예요.

경험이 곧 내 것이 되니까요.

앞으로 더 다양한 컴포넌트 예제, 실무 적용 팁, 디자인 시스템 연동까지 다룰 예정이니,

꼭 블로그 구독과 다음 글 알림 설정해 주세요!

🙌 React를 여러분만의 무기로 만들어 드릴게요. 💪

'React' 카테고리의 다른 글

리액트 컴포넌트의 기본 개념 이해하기 (0)	2025.04.06
styled-components로 리액트 스타일링하기 (2)	2025.04.05
React에서 CSS 적용하기: 3가지 방법과 활용법 (0)	2025.04.04
React의 실행 과정 자세히 살펴보기 (0)	2025.04.02
2025년 Vite로 빠르게 React 프로젝트 만들기! (JavaScript 버전) (0)	2025.03.31

firstcodingNet