React 입문: 컴포넌트, Props, CSS 스타일링 완전 정복

React를 처음 시작할 때 가장 헷갈리는 것들 — 프로젝트 세팅부터 컴포넌트 생성, Props 전달, 스타일 적용까지 핵심만 뽑아 정리했습니다. Vite 기반 React 프로젝트를 기준으로 설명합니다.

🛠 개발 환경 준비

React 개발을 시작하기 전에 아래 도구들이 설치되어 있어야 합니다.

STEP 01

VS Code

코드 에디터. ES7+ React 스니펫 확장도 함께 설치합니다.

STEP 02

Node.js & npm

JS를 서버에서 실행할 수 있게 해주는 런타임. npm으로 패키지를 관리합니다.

STEP 03

VS Code 확장

ES7+ React/Redux/React-Native snippets — 단축키로 컴포넌트 틀을 자동 생성합니다.

⌨ 유용한 스니펫 단축키

rfc → React Function Component  ·  rafc → Arrow Function Component  ·  rcc → Class Component

---

🚀 Vite로 React 프로젝트 생성하기

React 프로젝트는 npm create vite 명령어로 생성합니다. 생성 후에는 반드시 npm i로 의존성을 설치해야 실행할 수 있습니다.

terminal

# 프로젝트 생성
npx create-vite ch01_props -- framework React, variant JavaScript

# 의존성 설치 (필수!)
cd ch01_props
npm i

# 개발 서버 실행
npm run dev
# → http://localhost:5173

💡 npm i 왜 필요한가요?

프로젝트 생성 시 package.json만 만들어지고 실제 라이브러리는 없습니다. Maven의 pom.xml → Maven Update처럼, npm i를 실행해야 node_modules가 생성되고 실행 가능한 상태가 됩니다.

React 렌더링 흐름

React가 화면을 그리는 순서를 이해하면 컴포넌트 구조가 훨씬 명확해집니다.

index.html → main.jsx → App.jsx → 각 컴포넌트

① index.html에 root div가 있음
<div id="root"></div>

② main.jsx가 App.jsx를 root에 렌더링
import { createRoot } from 'react-dom/client'
createRoot(document.getElementById('root')).render(<App />)

③ App.jsx에서 모든 컴포넌트를 조합해 화면 구성
function App() {
  return (
    <>
      <Hello />
      <Header />
    </>
  )
}

---

🧩 컴포넌트 생성과 주석

src 폴더 안에 .jsx 파일을 만들고 rfce 스니펫으로 기본 틀을 생성합니다. JSX 안에서의 주석 처리 방식이 일반 JS와 다릅니다.

src/Hello.jsx

import React from 'react'

function Hello() {
  return (
    <div>
      안녕하세요 {/* JSX 안 주석은 이렇게 */}
    </div>
  )
}

export default Hello

📌 Fragment <></> 란?

React 컴포넌트의 return은 반드시 하나의 최상위 엘리먼트로 감싸야 합니다. 불필요한 <div>를 추가하기 싫을 때 기능 없는 빈 태그 <></>(Fragment)를 사용합니다.

---

🎨 CSS 스타일 적용 3가지 방법

방법 1 — 인라인 스타일 (const 객체)

Hello.jsx

const cssStyle = {
  backgroundColor: "black",
  color: "white"
}

return <div style={cssStyle}>Hello</div>

방법 2 — App.css 클래스 적용

App.css

.circle {
  background-color: forestgreen;
  width: 50px;
  height: 50px;
  border-radius: 25px;
}

App.jsx

<div className='circle'></div>
// HTML의 class 대신 className 사용!

---

📦 Props — 컴포넌트에 값 전달하기

Props는 부모 컴포넌트에서 자식 컴포넌트로 값을 전달할 때 사용하는 객체입니다.

방식코드 예시특징

props 객체 통째로	function Hello(props)	props.name으로 접근
비구조 할당	function Hello({name, color})	바로 변수명으로 사용 가능
defaultProps	Hello.defaultProps = {}	값이 없을 때 기본값 사용

App.jsx — 부모에서 props 전달

<Hello name="홍길동" color="red" />
<Hello color="blue" />   // name 없음 → defaultProps 사용

Hello.jsx — props 받기 (비구조 할당)

function Hello({ name, color }) {
  const style = { color: color }

  return (
    <div style={style}>
      안녕하세요, {name}!
    </div>
  )
}

Hello.defaultProps = {
  name: "이름 없음"
}

export default Hello

⚠ JSX에서 중괄호 {} 이중 사용

style={{color: color}}에서 바깥 {}는 JSX에서 JS를 사용하기 위한 것이고, 안쪽 {}는 JavaScript 객체 리터럴입니다.

---

🗂 Component Wrapper — 컴포넌트 감싸기

기존 컴포넌트들을 공통 스타일로 감싸고 싶을 때 Wrapper 컴포넌트를 만들고 children props를 활용합니다.

src/Wrapper.jsx

function Wrapper({ children }) {
  const style = {
    border: '1px solid blue',
    padding: '20px'
  }
  return <div style={style}>{children}</div>
}

export default Wrapper

App.jsx — Wrapper 사용

<Wrapper>
  <Hello name="홍길동" color="red" />
  <Hello color="blue" />
</Wrapper>

---

이번 글에서는 React의 가장 기본이 되는 개념들을 다뤘습니다. 다음 글에서는 useState를 활용한 상태 관리와 이벤트 처리로 넘어갑니다. 🚀