React JSX 기초 문법 정리
1. useState로 상태 관리하기
useState()
는 React 함수형 컴포넌트에서 상태(state)를 선언하고 관리할 수 있게 해주는 Hook입니다.
import { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
return (
<>
<h1>카운터 예제</h1>
<p>현재 값: {count}</p>
<button onClick={() => setCount(count + 1)}>+1 증가</button>
</>
);
}
※ const [변수이름, 변경함수] = useState(초기값)
형식은 구조 분해 할당을 통해 상태(state) 값을 선언하는 방법입니다.
※ [count, setCount]
는 구조 분해 할당이며, count
는 상태 값, setCount()
는 해당 값을 변경하는 함수입니다.
※ 상태가 변경되면 React가 자동으로 화면을 다시 렌더링합니다.
2. JSX란?
JSX는 JavaScript 확장 문법으로, 마치 HTML처럼 보이는 문법을 사용해 UI를 만들 수 있게 해줍니다.
하지만 내부적으로는 React.createElement()
로 변환됩니다.
3. 반드시 하나의 부모 요소로 감싸야 한다
function App() {
return (
<div>
<div>첫번째 DIV</div>
<div>두번째 DIV</div>
</div>
)
}
※ 여러 태그를 묶을 때는 반드시 하나의 부모 요소로 감싸야 합니다.
3-1. Fragment 사용
import { Fragment } from 'react';
function App() {
return (
<Fragment>
<div>첫번째 DIV</div>
<div>두번째 DIV</div>
</Fragment>
)
}
3-2. Fragment 단축 표현
function App() {
return (
<>
<div>첫번째 DIV</div>
<div>두번째 DIV</div>
</>
)
}
4. JSX 안에서 자바스크립트 표현식 사용
function App() {
const name = "홍길동";
const age = 23;
return (
<>
<h1>안녕, {name}</h1>
<h2>나이는 {age}세 입니다.</h2>
<h2>내년에는 {age + 1}세가 됩니다.</h2>
</>
)
}
5. 조건문은 삼항 연산자 또는 && 연산자로
function App() {
const name = "홍길동";
return (
<h1>
{ name === "홍길동" ? "환영합니다." : "환영하지 않습니다." }
</h1>
)
}
5-1. AND 연산자 사용 예시
function App() {
const isLoggedIn = true;
return (
<>
<h1>홈페이지입니다</h1>
{isLoggedIn && <p>로그인되었습니다.</p>}
</>
)
}
6. class 속성은 className으로 작성
function App() {
return (
<div className="container">
Hello
</div>
)
}
7. 주석 다는 방법
function App() {
return (
<>
{/* 이렇게 주석 작성 */}
<div>내용입니다</div>
</>
)
}
8. 인라인 스타일 적용 방법
// 스타일 객체 직접 적용
function App() {
return (
<div style={{ color: "blue", fontSize: "20px", backgroundColor: "lightgray" }}>
스타일이 적용된 텍스트입니다.
</div>
);
}
// 스타일 객체를 변수로 따로 선언한 경우
const myStyle = {
color: "white",
backgroundColor: "black",
padding: "10px",
borderRadius: "8px"
};
function App() {
return (
<div style={myStyle}>
객체 형태의 스타일 변수 적용 예시
</div>
);
}
9. 함수형 컴포넌트 vs 클래스형 컴포넌트
React에서는 컴포넌트를 작성할 때 함수형 컴포넌트 + Hook 방식이 최신 표준이며 가장 많이 사용됩니다.
함수형 컴포넌트
function Welcome(props) {
return <h1>안녕하세요, {props.name}님!</h1>;
}
export default Welcome;
클래스형 컴포넌트
import React, { Component } from 'react';
class Welcome extends Component {
render() {
return <h1>안녕하세요, {this.props.name}님!</h1>;
}
}
export default Welcome;
비교 요약
| 구분 | 함수형 컴포넌트 | 클래스형 컴포넌트 |
|-------------|--------------------------|-----------------------------|
| 정의 방식 | 함수 (function) | 클래스 (class) |
| props 접근 | props.name | this.props.name |
| 상태 관리 | useState, useEffect 등 | this.state, this.setState() |
| 코드 구조 | 간결하고 최신 방식 | render() 필요, 문법 복잡함 |
10. 전체 요약
- JSX는 JavaScript 코드 안에서 HTML처럼 UI를 구성할 수 있는 문법
- 컴포넌트는 반드시 하나의 부모 요소로 감싸야 하며, Fragment로 감쌀 수 있음
- { } 안에 JS 표현식(변수, 연산 등) 사용 가능
- 조건부 렌더링은 ? : 또는 && 연산자를 사용
- HTML의 class는 className으로, for는 htmlFor로 작성
- 스타일은 객체로 지정하고, 속성은 카멜표기법으로 작성
- JSX 내부 주석은 {/* */} 형태로만 사용 가능
- 상태 관리를 위해 useState 등 Hook을 사용하며, 함수형 컴포넌트가 권장됨
'React' 카테고리의 다른 글
React + FastAPI로 JWT 인증 기반 이벤트 관리 시스템 만들기 (0) | 2025.05.23 |
---|---|
React - Router (0) | 2025.05.20 |
React - props, 이벤트 핸들러 (0) | 2025.05.20 |
React - Vite를 사용한 React 앱 개발 (0) | 2025.05.19 |