- React 기초 목차
반응형
1) JSX (JavaScript XML)
React는 JSX를 사용해 UI를 작성합니다. JSX는 HTML과 비슷하지만, JavaScript와 함께 동작하는 특수 문법입니다.
- JSX 기본 문법
function App() {
const name = "React";
return (
<div>
<h1>Hello, {name}!</h1> {/* 중괄호로 JavaScript 표현식 사용 */}
</div>
);
}
export default App;
2) 컴포넌트
React는 컴포넌트 기반으로 화면을 구성합니다.
컴포넌트는 크게 두 가지 종류가 있습니다.
- 함수형 컴포넌트 (Functional Component)
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
- 컴포넌트 사용
다른 컴포넌트에서 컴포넌트를 불러와 사용합니다.
function App() {
return (
<div>
<Welcome name="React" />
</div>
);
}
3) Props (Properties)
Props는 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하는 읽기 전용 데이터입니다.
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
function App() {
return <Greeting name="React Learner" />;
}
3) State (상태 관리)
State는 컴포넌트 내부에서 데이터를 저장하고 관리하는 방법입니다. React에서는 useState라는 Hook을 사용해 상태를 관리합니다.
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0); // 초기값 0
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increase</button>
<button onClick={() => setCount(count - 1)}>Decrease</button>
</div>
);
}
export default Counter;
- useState의 반환값은 상태 변수와 상태를 변경하는 함수입니다.
- setCount()를 호출하면 컴포넌트가 재렌더링됩니다.
4) 이벤트 핸들링
React에서 이벤트를 처리하는 방법은 다음과 같습니다.
function ButtonClick() {
const handleClick = () => {
alert("Button clicked!");
};
return <button onClick={handleClick}>Click Me</button>;
}
5) 조건부 핸들링
특정 조건에 따라 화면에 표시할 내용을 다르게 렌더링할 수 있습니다.
function UserGreeting(props) {
const isLoggedIn = props.isLoggedIn;
return (
<div>
{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
</div>
);
}
function App() {
return <UserGreeting isLoggedIn={true} />;
}
반응형
'IT' 카테고리의 다른 글
React 함수 선언 방법 2가지 (0) | 2024.12.17 |
---|---|
React의 State(상태)란? (0) | 2024.12.17 |
IP 주소 확인 (0) | 2024.12.16 |
오라클 힌트 (0) | 2024.12.13 |
AI 에이전트란? (2) | 2024.12.10 |