react 기본 정리

1. 컴포넌트 구조 및 상태 관리
   React에서 컴포넌트는 UI를 구성하는 기본 단위이며, 상태(state)와 props를 통해 데이터를 주고받는다.

• Props: 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용. 읽기 전용(immutable).
• State: 컴포넌트 내부에서 관리되는 데이터. useState를 사용하여 선언하며, 값이 변경되면 리렌더링을 유발.

import { useState } from "react";
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

2. 이펙트 관리 (useEffect)
   useEffect는 컴포넌트의 라이프사이클을 다룰 때 사용하며, 특정 상태가 변경될 때 실행할 로직을 정의할 수 있다.

• 의존성 배열이 []이면 마운트 시 1회 실행.
• 특정 상태를 넣으면 해당 상태가 변경될 때 실행.
• 클린업 함수(return () => {})를 사용하여 언마운트 시 실행할 로직을 정리할 수 있음.

import { useEffect, useState } from "react";
function Timer() {
  const [time, setTime] = useState(0);
useEffect(() => {
    const interval = setInterval(() => {
      setTime((prev) => prev + 1);
    }, 1000);
	return () => clearInterval(interval); // 컴포넌트 언마운트 시 정리
  }, []);
	return <p>타이머: {time}초</p>;
}

3. 컴포넌트 스타일링 (styled-components)
   React에서 스타일을 적용하는 방법 중 하나로 styled-components를 사용하면 컴포넌트 단위로 스타일을 관리할 수 있다.

import styled from "styled-components";
const Button = styled.button`
  background-color: ${(props) => (props.primary ? "blue" : "gray")};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  &:hover {
    opacity: 0.8;
  }
`;
function App() {
  return <Button primary>클릭</Button>;
}

4. React에서 리스트 렌더링 (map)과 key 사용
   배열 데이터를 컴포넌트로 변환할 때 map을 사용하며, key 속성을 적절히 설정해야 한다.
   key는 React가 요소를 구별하는 기준이므로 고유한 값(예: id)을 사용해야 함.

const items = [
  { id: 1, name: "아이템1" },
  { id: 2, name: "아이템2" },
];
function ItemList() {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li> // key는 고유해야 함
      ))}
    </ul>
  );
}

5. 이벤트 핸들링 및 함수 전달
   React에서는 이벤트 핸들러를 props로 전달할 수 있으며, 함수를 전달할 때는 콜백 형태로 넘겨야 한다.

function Child({ onClick }) {
  return <button onClick={onClick}>클릭</button>;
}
function Parent() {
  const handleClick = () => alert("클릭됨!");
  return <Child onClick={handleClick} />;
}

6. 조건부 렌더링 (&&, ?: 사용)
   컴포넌트에서 특정 조건에 따라 UI를 다르게 렌더링할 때 사용한다.

const isLoggedIn = true;
function Welcome() {
  return (
    <div>
      {isLoggedIn ? <p>환영합니다!</p> : <p>로그인이 필요합니다.</p>}
      {isLoggedIn && <button>로그아웃</button>}
    </div>
  );
}

7. useRef를 활용한 DOM 조작
   useRef를 사용하면 컴포넌트가 리렌더링되지 않고도 특정 DOM 요소를 직접 참조할 수 있다.

import { useRef } from "react";
function FocusInput() {
  const inputRef = useRef(null);
  const handleFocus = () => {
    inputRef.current.focus();
  };
  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>포커스</button>
    </div>
  );
}

8. useContext를 활용한 전역 상태 관리
   useContext를 사용하면 부모-자식 간의 props 전달 없이 전역 상태를 관리할 수 있다.

import { createContext, useContext, useState } from "react";
const ThemeContext = createContext();
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}
function ThemedComponent() {
  const { theme, setTheme } = useContext(ThemeContext);
  return (
    <div style={{ background: theme === "light" ? "#fff" : "#333", 
        color: theme === "light" ? "#000" : "#fff" }}>
      <p>현재 테마: {theme}</p>
      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>테마 변경</button>
    </div>
  );
}
function App() {
  return (
    <ThemeProvider>
      <ThemedComponent />
    </ThemeProvider>
  );
}

9. useReducer를 활용한 상태 관리
   useReducer는 복잡한 상태 로직을 관리할 때 유용하다.

import { useReducer } from "react";
function reducer(state, action) {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    case "DECREMENT":
      return { count: state.count - 1 };
    default:
      return state;
  }
}
function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
    <div>
      <p>카운트: {state.count}</p>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>-</button>
    </div>
  );
}