이번에는 **리액트 초보자용 “웹 프론트엔드 문법”**을 👉 실제 웹 화면 만들 때 바로 쓰는 문법만 정리해줄게요.
🌐 리액트 초보자용 웹 프론트엔드 문법1️⃣ 컴포넌트 = 화면 조각
웹 화면은 컴포넌트로 구성돼요.
function App() {
return <h1>웹 프론트엔드 시작</h1>;
}
export default App;
✔ 함수 = 화면
✔ 대문자 시작
2️⃣ JSX (HTML처럼 작성)🔹 변수 출력
const title = "홈페이지";
<h1>{title}</h1>
🔹 주석
{/* JSX 주석 */}
3️⃣ 태그 규칙 (웹에서 가장 많이 실수)❗ 하나의 부모 태그
<>
<header>헤더</header>
<main>본문</main>
</>
❗ HTML → JSX 차이 class className for htmlFor
4️⃣ 이벤트 처리 (버튼, 클릭)
<button onClick={clickHandler}>클릭</button>
function clickHandler() {
alert("버튼 클릭");
}
✔ camelCase
✔ () 붙이지 않음
5️⃣ 상태 관리 (useState) ⭐⭐⭐
import { useState } from "react";
function App() {
const [login, setLogin] = useState(false);
return (
<>
<button onClick={() => setLogin(!login)}>
로그인 토글
</button>
{login ? <p>로그인 상태</p> : <p>로그아웃</p>}
</>
);
}
📌 웹 화면이 자동으로 바뀌는 이유
6️⃣ 조건부 렌더링 (웹 필수)
{isAdmin && <button>관리자</button>}
{loading ? <p>로딩중</p> : <p>완료</p>}
7️⃣ 리스트 출력 (메뉴, 게시판)
const menus = ["홈", "소개", "문의"];
<ul>
{menus.map((menu, index) => (
<li key={index}>{menu}</li>
))}
</ul>
✔ key 필수
8️⃣ Props (레이아웃 분리)
function Header({ title }) {
return <h1>{title}</h1>;
}
<Header title="메인 페이지" />
9️⃣ 입력 폼 처리 (로그인, 검색)
const [id, setId] = useState("");
<input
value={id}
onChange={(e) => setId(e.target.value)}
/>
🔟 웹 스타일 적용CSS 파일
<div className="container">내용</div>
인라인 스타일
<div style={{ marginTop: "10px" }}></div>
🎯 웹 프론트 초보자 핵심 요약
✔ 화면 = 컴포넌트
✔ 상태 변경 = 화면 변경
✔ 클릭/입력은 이벤트
✔ 메뉴/목록은 map
✔ 조건은 삼항/&&
