[260709 09일차] React

# React 학습일지

[React 입문] Vite로 시작하는 첫 React
컴포넌트 · JSX · Props · 조건부 렌더링

2026.07.09 · React + Vite · 실습 컴포넌트 7개 (18 Hello ~ 24 Alert)

📋 오늘 한 일

드디어 React에 입문했다. 오전엔 "React가 대체 뭐고 왜 쓰는지", JSX 문법 규칙, 그리고 Node.js 설치 → Vite로 프로젝트 만들기 → 폴더 구조 이해까지 환경 세팅을 훑었다. 오후엔 src/components/ 폴더에 직접 컴포넌트를 만들어봤다 — 첫 컴포넌트(Hello)부터 시작해 props로 값 넘기기, 기본값 주기, 카드 만들기, 그리고 조건부 렌더링(&&와 삼항 연산자)까지 실습했다. HTML/CSS/JS만 쓰다가 "화면을 함수로 조립한다"는 발상이 처음엔 낯설었는데, 컴포넌트를 하나씩 만들어 App.jsx에 끼워 넣다 보니 감이 잡히기 시작했다. 중간에 방금 만든 my-app을 Understand-Anything 플러그인으로 시각화해 구조를 그래프로 뜯어보는 도구도 익혔다(react.html 14번 Claude Understand 순서).

React 개념

컴포넌트레고 블록

JSX 문법

className{ } 중괄호태그 닫기

개발 환경

Node.jsVitenpm run dev

폴더 구조

main.jsxApp.jsxcomponents/

컴포넌트 만들기

export defaultimport

Props

구조 분해기본값

조건부 렌더링

&& 연산삼항 연산자

보너스 도구

Understand-Anything지식 그래프

1. React란? — 화면을 레고 블록처럼 조립

강의에서 React를 "화면을 레고 블록(컴포넌트)처럼 조립해서 만드는 도구"라고 정의했다. 버튼·카드 같은 부품을 한 번 만들어두면 어디서든 재사용하고, 데이터 값만 바꾸면 화면이 자동으로 다시 그려진다. 인스타그램·넷플릭스도 React로 만들어졌을 만큼 사실상 업계 표준이라는 점이 인상적이었다.

🧩 핵심 감각 — 지금까지는 HTML 한 파일에 화면을 통째로 그렸다면, React는 작은 화면 조각(컴포넌트)을 함수로 만들어 조립한다. "재사용"과 "데이터가 바뀌면 화면 자동 갱신" 이 두 가지가 React를 쓰는 이유다.

---

2. JSX 문법 — HTML 같지만 다른 3가지 규칙

JSX는 자바스크립트의 return 안에 HTML처럼 화면을 쓰는 문법이다. 겉보기엔 HTML인데 딱 3가지가 다르다.

규칙	내용
① class ➜ className	JS 예약어 class와 겹쳐서 이름을 바꿔 쓴다
② 값은 { } 중괄호	변수·계산·함수 호출을 중괄호 안에 넣는다
③ 빈 태그도 꼭 닫기	<img />처럼 self-closing 필수

// ① class 대신 className
<div className="box">

// ② 중괄호 안에 값·계산 넣기
<h1>안녕, {name}!</h1>
<p>{1 + 1}</p>

// ③ 빈 태그도 반드시 닫기
<img src="a.png" />

모든 .jsx 파일은 ① import(재료 가져오기) → ② 컴포넌트 함수 → ③ return 안의 화면 → ④ export default 라는 똑같은 3~4층 구조로 되어 있다. "위에서 아래로 순서대로 읽으면 끝"이라는 설명이 이해에 도움이 됐다.

---

3. 개발 환경 — Node.js + Vite

React를 만드는 도구들(npm·Vite)이 전부 Node.js 위에서 돌아가기 때문에 Node.js부터 깔아야 한다. nodejs.org에서 초록색 LTS 버전을 받아 설치하고, VSCode를 완전히 껐다 켠 뒤 버전을 확인했다.

# Node & npm 설치 확인 (npm은 Node의 짝꿍, 같이 깔림)
node -v      # v22.x.x
npm -v       # 10.x.x

그다음 Vite 명령어 한 줄로 프로젝트를 통째로 만들었다. 프레임워크는 React, 변형은 JavaScript를 골랐다.

# 프로젝트 생성
npm create vite@latest my-app

# 이후엔 폴더로 들어가 개발 서버 실행
cd my-app
npm run dev      # ➜ Local: http://localhost:5173/

Vite는 프로젝트 폴더·파일을 자동으로 만들어주고, JSX를 실시간으로 순수 JS로 번역하며, localhost:5173 미리보기 서버를 띄워 저장하면 새로고침 없이 즉시 화면에 반영해준다(HMR). 파일 저장만 하면 브라우저가 알아서 바뀌는 게 신기했다.

---

4. 폴더 구조 — 파일이 연결되는 순서

파일이 많아서 처음엔 헷갈렸는데, "누가 누구를 부르는지" 흐름만 잡으면 단순했다. index.html이 시작점이고, 거기서 main.jsx를 부르고, main.jsx가 내가 작업할 App.jsx를 화면에 그려 넣는 구조다.

1index.html시작점(빈 액자). <div id="root"> 빈 칸에 React가 화면을 그린다

2main.jsxroot 칸을 찾아 <App />을 끼워 넣는 연결부 (거의 안 고침)

3App.jsx내 메인 화면. 매일 여기서 작업한다

4components/재사용할 부품(컴포넌트) 파일들을 모아두는 곳

// main.jsx — index.html의 root를 찾아 App을 그려 넣는다
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

처음엔 딱 두 개만 기억하면 된다 — src/(여기서 코드 짬)와 index.html(시작점). node_modules/는 설치된 패키지 덩어리라 건드릴 필요 없다.

---

5. Claude Understand — 코드베이스를 지식 그래프로 (14)

폴더 구조를 다 훑고 컴포넌트 실습에 들어가기 전, 방금 만든 my-app 폴더를 시각화해서 공부하는 도구를 하나 익혔다. Understand-Anything이라는 Claude Code 플러그인인데, 여러 개의 에이전트(멀티에이전트)가 코드베이스 전체를 스캔해 파일·함수·클래스·의존성을 "지식 그래프"로 만들어 인터랙티브 대시보드로 보여준다. "이 파일이 뭘 하고 어디에 연결되는지"를 한눈에 볼 수 있어서, 처음 보는 코드의 막막함을 풀어주는 게 핵심이다.

🕸 왜 여기서 써봤나 — 바로 앞에서 main.jsx → App.jsx → components/로 파일이 연결되는 구조를 배웠는데, 이 연결 관계를 그래프로 직접 보니 "누가 누구를 import하는지"가 눈에 확 들어왔다. 20만 줄짜리 대형 코드베이스 온보딩용 도구라는데, my-app처럼 작은 프로젝트도 구조를 눈으로 보며 공부하기 좋았다.

설치 (Claude Code)

# 마켓플레이스 추가 → 플러그인 설치 → 리로드
/plugin marketplace add Egonex-AI/Understand-Anything
/plugin install understand-anything
/reload-plugins

실행 명령어

명령어	기능
/understand	분석 + 지식 그래프 생성
/understand-dashboard	인터랙티브 시각화 대시보드 열기
/understand-chat	코드베이스에 질문하기
/understand-diff	변경 영향도 분석
/understand-explain	파일/함수 심층 설명

사용 방법 — 프로젝트 폴더에서 /understand로 분석하고 /understand-dashboard로 대시보드를 연다. 딱 이 두 줄로 시작. 그래프의 노드를 클릭하면 "이 코드가 뭘 하고 어디에 연결되는지" 설명이 뜨고, 생성된 그래프는 폴더에 저장돼 재사용된다. PDF·마크다운·이미지까지 비전으로 읽어준다는 점도 특이했다.

어디에 좋나 — 처음 보는·대형 코드베이스 온보딩, 변경 영향도 추적, 지식 베이스 정리에 쓴다. 나처럼 이제 막 React 구조를 익히는 단계에서는 "내가 만든 프로젝트가 실제로 어떻게 엮여 있는지"를 확인하는 학습용으로 딱이다. 🔗 github.com/Egonex-AI/Understand-Anything

---

6. 첫 컴포넌트 만들기 — Hello (17·18)

컴포넌트는 결국 JSX를 돌려주는 함수 1개다. 규칙은 세 가지: ① 이름은 대문자로 시작, ② return하는 화면은 태그 하나로 감싸기, ③ 맨 아래 export default 필수. CSS 파일도 import 한 줄로 붙일 수 있다.

// components/18/Hello.jsx
import './Hello.css'

const Hello = () => {
    return (
        <div className="box">
            <h1>레인보우샤베트</h1>
            <p>먹고싶다</p>
        </div>
    )
}

export default Hello

만든 컴포넌트는 App.jsx에서 import 한 뒤 태그처럼 <Hello />로 쓰면 된다.

// App.jsx
import Hello from './components/18/Hello.jsx'

function App() {
  return (
    <>
      <Hello />
    </>
  )
}

화면 조각 여러 개를 하나로 묶어야 하는데 div로 감싸기 싫을 땐 빈 태그 <>...</>(Fragment)를 쓴다. "div는 종이상자(화면에 남음), <>는 투명 랩(흔적 없음)"이라는 비유가 딱 와닿았다.

---

7. Props — 부모가 자식에게 값 넘기기 (19·20)

Props는 부모 컴포넌트가 자식에게 넘겨주는 값이다. 같은 컴포넌트를 값만 바꿔 재사용할 수 있게 해준다. 받는 쪽에서는 { }로 구조 분해해서 꺼내 쓴다.

// components/19/Greeting.jsx — name, age를 props로 받기
const Greeting = ({name, age}) => {
    return (
        <>
            <h1>Hello! {name} ({age})</h1>
        </>
    )
}
export default Greeting

// App.jsx에서 값 넘기기
<Greeting name="React" age="20" />

Props 기본값 주기

값을 안 넘겼을 때를 대비해 매개변수에 =로 기본값을 정해둘 수 있다. Profile은 아무것도 안 넘기면 YUN / 개발자가 뜨고, 넘기면 그 값으로 바뀐다.

// components/20/Profile.jsx — 기본값이 있는 props
import './Profile.css'

const Profile = ({job = "개발자", name = "YUN"}) => {
    return (
        <>
        <h2>{name}</h2>
        <p>{job}</p>
        </>
    )
}
export default Profile

<Profile name="고양이" job="웹 프론트" />처럼 넘기면 기본값을 덮어쓴다. props를 안 넘겨도 화면이 안 깨지게 안전장치를 걸어두는 습관이 중요하다고 배웠다.

---

8. 카드 컴포넌트 — props 여러 개 조합 (21)

props를 여러 개(title·desc·emoji) 받아 하나의 카드 UI로 조립해봤다. 이게 바로 "레고 블록"의 감각 — 같은 카드 틀에 데이터만 갈아 끼우면 카드가 무한히 찍혀 나온다.

// components/21/Card.jsx
import './Card.css'

const Card = ({title, desc, emoji}) => {
    return (
        <div className="card">
            <span>{emoji}</span>
            <h3>{title}</h3>
            <p>{desc}</p>
        </div>
    )
}
export default Card

// 사용 예
<Card title="한윤지" desc="개발자되기" emoji="😭" />

---

9. 조건부 렌더링 — 상황에 따라 다르게 그리기 (22·23)

값에 따라 화면 일부를 보여주거나 숨기는 게 조건부 렌더링이다. 두 가지 방법을 실습했다.

① && — 참일 때만 보여주기

Avatar는 online이 true일 때만 별(⭐)을 붙인다. 조건 && 화면 형태로, 조건이 참이면 뒤의 화면을 그리고 거짓이면 아무것도 안 그린다.

// components/22/Avatar.jsx
const Avatar = ({name, online}) => {
    return (
        <>
        <h1>{name}</h1>
        {online && <p>⭐</p>}
        </>
    )
}
export default Avatar

② 삼항 연산자 — 참/거짓 갈라 처리

Badge는 type 값에 따라 색을 다르게 준다. 조건 ? A : B 형태로, 두 갈래 중 하나를 고른다. 인라인 스타일은 style={{ }}처럼 중괄호 두 개(객체)로 넣는다는 것도 새로 배웠다.

// components/23/Badge.jsx
import './Badge.css'

const Badge = ({text, type}) => {
    const color = type === "new" ? 'green' : 'crimson'
    return (
        <>
        <span style={{backgroundColor:color, color:'#fff'}}>{text}</span>
        </>
    )
}
export default Badge

// 사용 예 — type에 따라 초록/빨강
<Badge text="true 테스트" type="new" />
<Badge text="false 테스트" type="not" />

헷갈렸던 점 — JSX에서 인라인 스타일은 style="color:red"(문자열)가 아니라 style={{ color: 'red' }}(객체)로 쓴다. 바깥 { }는 "JS 값을 넣는다", 안쪽 { }는 "객체"라서 중괄호가 두 겹이 된다. CSS 속성명도 background-color가 아니라 backgroundColor(카멜케이스)로 쓴다.

다음 컴포넌트로 Alert(24)까지 폴더를 잡아두고 오늘 수업은 여기서 마무리됐다. 조건부 렌더링을 조금 더 응용해볼 차례다.

---

10. 오늘 배운 것 한눈에

주제	실습(컴포넌트)	핵심
컴포넌트 만들기	18 Hello	JSX 반환 함수 + export default + CSS import
Props 받기	19 Greeting	{name, age} 구조 분해
Props 기본값	20 Profile	{job = "개발자"}
Props 조합	21 Card	여러 값으로 카드 UI 조립
조건부 렌더링 ①	22 Avatar	online && <p>⭐</p>
조건부 렌더링 ②	23 Badge	삼항 type === "new" ? 'green' : 'crimson'

---

🔁 회고

잘한 점 — 컴포넌트를 번호별 폴더로 하나씩 쌓아가니 "props를 넘긴다 → 자식이 받아 그린다"는 흐름이 자연스럽게 손에 익었다. 특히 <Card />를 만들고 나서 "아, 이래서 재사용이 편하다는 거구나"가 확 와닿았다.

아쉬운 점 / 헷갈린 점 — className과 인라인 스타일의 이중 중괄호 {{ }}, 그리고 CSS 속성을 카멜케이스로 써야 하는 규칙에서 계속 실수가 났다. Badge의 Badge.css에 backgroundColor: color;처럼 CSS 파일에 JS 문법을 섞어 쓴 부분은 실제론 적용이 안 된다는 것도 나중에 알았다(스타일은 JSX의 style={{ }} 쪽에서 이미 처리됨). 문법이 익숙해지려면 좀 더 반복이 필요할 듯하다.

✍️ 마치며

순수 HTML/CSS/JS에서 React로 넘어오는 첫날이었다. "화면 = 함수", "값은 props로 넘긴다", "조건에 따라 화면이 바뀐다"는 세 가지 감각을 잡은 게 오늘의 가장 큰 수확이다. 아직 state(useState)와 useEffect, map으로 목록 그리기, fetch로 데이터 불러오기 같은 진짜 React다운 부분은 안 배웠으니, 다음 시간엔 "데이터가 바뀌면 화면이 자동으로 다시 그려진다"는 React의 핵심을 직접 확인해보고 싶다.

🏷️ React  |  Vite  |  JSX  |  컴포넌트  |  Props  |  조건부렌더링  |  학습일지