React 핵심 패턴 & 활용 정리

React 핵심 패턴 이해

---

📌 반응형 데이터 관리 (useState)

const [count, setCount] = useState(0);
// 상태가 바뀌면 → 자동으로 리렌더링

Vue의 ref()와 같은 개념. 데이터 바뀌면 화면도 자동 업데이트

---

📌 이벤트 핸들링

function handleClick() {
  setCount(count + 1);
}

<button onClick={handleClick}>클릭</button>
// 주의: onClick={handleClick()}  ← 이렇게 하면 안됨 (즉시실행)

---

📌 조건부 렌더링

// 삼항연산자
{isLogin ? <Dashboard /> : <Login />}

// && 연산자
{isLoading && <Spinner />}

---

📌 리스트 렌더링

{items.map((item) => (
  <li key={item.id}>{item.name}</li>  // key 필수!
))}

key가 없으면 React가 어떤 요소가 바뀐지 추적 못함

---

📌 입력 바인딩 패턴 (Controlled Component)

const [value, setValue] = useState('');

<input 
  value={value} 
  onChange={(e) => setValue(e.target.value)} 
/>

입력값을 state로 직접 관리하는 패턴

---

📌 요소 참조 (useRef)

const inputRef = useRef(null);

<input ref={inputRef} />
<button onClick={() => inputRef.current.focus()}>포커스</button>

DOM에 직접 접근할 때 사용. 값 바꿔도 리렌더링 안 됨

---

📌 컴포넌트 활용 (Props)

// 부모
<UserCard name="홍길동" age={20} />

// 자식
function UserCard({ name, age }) {
  return <div>{name} - {age}</div>
}

---

React 활용

---

📌 스타일링

// 1. CSS Module (충돌 방지)
import styles from './Button.module.css';
<button className={styles.btn}>클릭</button>

// 2. 인라인 스타일
<div style={{ color: 'red', fontSize: '16px' }}>텍스트</div>

// 3. Tailwind / styled-components 등도 많이 씀

---

📌 데이터 패칭 (useEffect + fetch)

const [data, setData] = useState(null);

useEffect(() => {
  fetch('https://api.example.com/data')
    .then(res => res.json())
    .then(json => setData(json));
}, []); // [] = 마운트될 때 한 번만 실행

useEffect = 컴포넌트가 렌더링된 후 실행되는 사이드이펙트 처리

---

📌 불변 상태 관리

// ❌ 직접 수정 (React가 변화 감지 못함)
state.push(newItem);

// ✅ 새 배열/객체 생성
setItems([...items, newItem]);
setUser({ ...user, name: '새이름' });

React는 참조값이 바뀌어야 리렌더링 됨

---

📌 전역 상태 관리 이해

컴포넌트A (state)
    ↓ props
컴포넌트B
    ↓ props  
컴포넌트C  ← 여기서 필요한데 계속 내려줘야 함 (Props Drilling 문제)

이걸 해결하는게 전역 상태 관리 (Context, Zustand, Redux 등)

---

📌 Context API

// 1. Context 생성
const ThemeContext = createContext();

// 2. Provider로 감싸기
<ThemeContext.Provider value={{ theme, setTheme }}>
  <App />
</ThemeContext.Provider>

// 3. 어디서든 꺼내쓰기
const { theme } = useContext(ThemeContext);

---

📌 Context API 모듈화

// ThemeContext.jsx 파일로 분리
export const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}
// 재사용 가능하게 파일로 쪼개는 패턴

---

📌 페이지 관리 기초 (React Router)

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

<BrowserRouter>
  <Link to="/about">소개</Link>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</BrowserRouter>

---

🗺️ 전체 흐름 요약

useState → 데이터 관리
useEffect → 외부 데이터 패칭
useRef → DOM 직접 접근
Context API → 전역 상태 공유
React Router → 페이지 이동