React 기초 문법 가이드
React는 컴포넌트 기반 UI 라이브러리로, 효율적으로 사용자 인터페이스를 구성하기 위해 사용되며. JSX 문법과 컴포넌트 개념이 핵심
1. JSX 문법
React는 JavaScript와 HTML을 결합한 JSX (JavaScript XML) 문법을 사용
function App() {
return <h1>Hello, React!</h1>;
}JSX 특징
- HTML과 유사하지만 JavaScript 코드로 변환가능
- 중괄호 {}로 JavaScript 표현식을 사용가능
const name = 'Nell';
const age = 25;
function App() {
return <h1>{name}는 {age}살입니다.</h1>;
}2. 컴포넌트 (Components)
(1) 함수형 컴포넌트
function Greeting() {
return <h2>안녕하세요!</h2>;
} export default Greeting;(2) 클래스형 컴포넌트
import React, { Component } from 'react';
class Greeting extends Component {
render() { return <h2>안녕하세요!</h2>; }
} export default Greeting;3. Props (Properties)
부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달합니다.
function Greeting(props) {
return <h1>안녕하세요,
{props.name}님!</h1>;
} function App() {
return <Greeting name="Nell" />;
}4. State (상태)
컴포넌트 내부에서 상태를 관리합니다.
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div> <p>카운트: {count}</p> <button onClick={() => setCount(count + 1)}>증가</button>
</div> ); }
export default Counter;5. 이벤트 핸들링
React에서 이벤트는 camelCase로 작성합니다.
function Button() {
function handleClick() {
alert('버튼이 클릭되었습니다!');
} return
<button onClick={handleClick}>클릭</button>;
}6. 조건부 렌더링
function Message({ isLoggedIn }) {
return (
<div> {isLoggedIn ?
<h1>환영합니다!</h1> : <h1>로그인 해주세요.</h1>
} </div>
);
}7. 리스트 렌더링
function ItemList() {
const items = ['React', 'Vue', 'Angular'];
return ( <ul> {items.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> ); }8. 스타일 적용
function StyledText() {
const textStyle = { color: 'blue', fontSize: '20px' };
return <p style={textStyle}>스타일이 적용된 텍스트</p>;
}9. useEffect (컴포넌트 생명주기)
import React, { useState, useEffect } from 'react';
function Timer() {
const [count, setCount] = useState(0);
useEffect(() => { document.title = `카운트: ${count}`; }, [count]);
return <button onClick={() => setCount(count + 1)}>증가</button>; }
export default Timer;요약
- JSX: JavaScript + HTML 문법
- 컴포넌트: UI 재사용 단위 (함수형 권장)
- Props와 State: 데이터 관리
- 이벤트 핸들링, 조건부/리스트 렌더링 지원
- useEffect: 컴포넌트 생명주기 제어
'Front-End > React' 카테고리의 다른 글
| Router (0) | 2025.02.17 |
|---|---|
| React-ContextAPI (0) | 2025.02.17 |
| ReportWebVitals란? (0) | 2025.02.11 |
