⚛️ React 치트시트
Facebook이 개발한 사용자 인터페이스 구축을 위한 JavaScript 라이브러리
기본 컴포넌트
함수형 컴포넌트
import React from 'react';
function Welcome({ name }) {
return <h1>Hello, {name}!</h1>;
}
export default Welcome;클래스형 컴포넌트
import React, { Component } from 'react';
class Welcome extends Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}
export default Welcome;JSX 문법
const element = (
<div>
<h1>Hello, World!</h1>
<p>This is JSX</p>
<button onClick={handleClick}>Click me</button>
</div>
);조건부 렌더링
function Greeting({ isLoggedIn }) {
return (
<div>
{isLoggedIn ? (
<h1>Welcome back!</h1>
) : (
<h1>Please sign in.</h1>
)}
</div>
);
}상태 관리
useState Hook
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}useEffect Hook
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}커스텀 Hook
import { useState, useEffect } from 'react';
function useCounter(initialValue = 0) {
const [count, setCount] = useState(initialValue);
const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);
const reset = () => setCount(initialValue);
return { count, increment, decrement, reset };
}Context API
import React, { createContext, useContext } from 'react';
const ThemeContext = createContext();
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar() {
const theme = useContext(ThemeContext);
return <div className={theme}>Toolbar</div>;
}이벤트 처리
이벤트 핸들러
function Button() {
const handleClick = (e) => {
e.preventDefault();
console.log('Button clicked!');
};
return (
<button onClick={handleClick}>
Click me
</button>
);
}폼 처리
import { useState } from 'react';
function Form() {
const [name, setName] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
console.log('Name:', name);
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<button type="submit">Submit</button>
</form>
);
}리스트 렌더링
function TodoList({ todos }) {
return (
<ul>
{todos.map(todo => (
<li key={todo.id}>
{todo.text}
</li>
))}
</ul>
);
}조건부 스타일링
function Button({ isActive }) {
return (
<button
style={{
backgroundColor: isActive ? 'blue' : 'gray',
color: 'white',
padding: '10px 20px'
}}
>
Click me
</button>
);
}