2026년도 리엑트로 적용한 소스는 어떻게 돼?

React는 기존 HTML/CSS/JavaScript를 그대로 사용하는 것이 아니라 컴포넌트(Component) 단위로 나누어 관리하는 방식입니다.

예를 들어 지금까지 작성했던 동부산CC 메인 페이지를 React로 만든다면 구조는 이렇게 바뀝니다.

src
│
├── assets
│   ├── images
│   └── video
│
├── components
│   ├── Header.jsx
│   ├── Hero.jsx
│   ├── CourseCard.jsx
│   ├── Gallery.jsx
│   ├── Footer.jsx
│   └── Button.jsx
│
├── pages
│   ├── Home.jsx
│   ├── Course.jsx
│   ├── GalleryPage.jsx
│   ├── Reservation.jsx
│   └── Contact.jsx
│
├── App.jsx
├── main.jsx
└── index.css

 

---

HTML 방식

 

<header>
    <h1>동부산CC</h1>
</header>

<section class="hero">
    ...
</section>

<footer>
    ...
</footer>

 

---

React 방식

Header.jsx

 

function Header(){

    return(

        <header>
            <h1>동부산CC</h1>
        </header>

    )

}

export default Header;

 

---

Hero.jsx

 

function Hero(){

    return(

        <section className="hero">

            <h2>Premium Golf Club</h2>

            <button>예약하기</button>

        </section>

    )

}

export default Hero;

 

---

Footer.jsx

 

function Footer(){

    return(

        <footer>

            ©2026 DongBusan CC

        </footer>

    )

}

export default Footer;

 

---

App.jsx

 

import Header from "./components/Header";
import Hero from "./components/Hero";
import Footer from "./components/Footer";

function App(){

    return(

        <>

            <Header />

            <Hero />

            <Footer />

        </>

    )

}

export default App;

 

---

실행하면 브라우저에서는 결국

 

<header>
...
</header>

<section>
...
</section>

<footer>
...
</footer>

 

처럼 렌더링됩니다.

즉 HTML이 없어지는 것이 아니라 JSX를 통해 HTML을 생성하는 것입니다.

---

CSS는 거의 동일

 

.hero{

    height:100vh;
    background:#000;
    color:white;

}

 

React에서도 그대로 사용합니다.

 

import "./Hero.css";

 

---

JavaScript도 그대로 사용

지금까지 배운

• 변수
• 함수
• 배열
• 반복문
• 객체
• 조건문
• 이벤트
• localStorage

모두 그대로 사용합니다.

예를 들어 버튼 클릭도

 

function Hero(){

    function click(){

        alert("예약");

    }

    return(

        <button onClick={click}>
            예약하기
        </button>

    )

}

 

입니다.

---

반복문

JavaScript

 

courses.forEach(...)

 

React

 

{courses.map(course=>(
    <CourseCard
        key={course.id}
        title={course.title}
    />
))}

 

React에서는 화면을 만들 때 map()을 매우 자주 사용합니다.

---

조건문

 

{
    login
        ? <Logout />
        : <Login />
}

 

로그인 여부에 따라 다른 화면을 보여줄 수 있습니다.

---

페이지 이동

기존 HTML

index.html

course.html

gallery.html

 

React

/

course

gallery

reservation

 

하나의 앱 안에서 화면만 변경됩니다.

---

React에서 가장 많이 사용하는 문법

현재까지 배운 JavaScript 기준으로 추가되는 핵심 개념은 많지 않습니다.

JavaScriptReact

함수	컴포넌트
변수	state
if	조건부 렌더링
for	map()
addEventListener	onClick
innerHTML	JSX
querySelector	거의 사용하지 않음
classList	className
value	useState

---

지금까지 만든 프로젝트가 React에서는 이렇게 바뀝니다

기존 프로젝트React 구성

동부산CC	Header, Hero, Course, Gallery, Footer
AI 교육센터	Hero, Feature, Curriculum, Review, Contact
골프 커뮤니티	Board, Card, Login, Profile
부산 오늘 뭐하지	Category, Card, Modal
유튜브 카드	VideoCard 컴포넌트

예를 들어 유튜브 카드 100개를 만들 때도 하나의 VideoCard 컴포넌트를 여러 번 재사용하면 되므로 코드가 훨씬 간결해집니다.

---

현재 시점에서 가장 중요한 준비

당신은 이미 DOM 조작, 이벤트, localStorage 등을 학습했고, 다음으로 React를 배우게 된다면 우선 아래 순서에 집중하는 것이 좋습니다.

1. JSX 문법
2. 컴포넌트 분리
3. Props
4. useState
5. map()을 이용한 리스트 출력
6. 화면 전환(라우팅)
7. API 데이터 연결

지금까지 만든 동부산CC, 골프 커뮤니티, AI 교육센터 같은 프로젝트는 모두 React로 자연스럽게 옮길 수 있습니다. 오히려 컴포넌트로 분리하면서 유지보수가 훨씬 쉬워지는 것이 React의 가장 큰 장점입니다.