React 자주 쓰이는 문법 핵심 정리

React는 컴포넌트 기반의 UI 라이브러리임. 

 

컴포넌트 기반의 UI 라이브러리 -> 설명글

 

---

1. 컴포넌트 (Component)

// 함수형 컴포넌트 (권장 방식)
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 화살표 함수 + JSX
const Button = ({ onClick, children }) => (
  <button onClick={onClick}>{children}</button>
);

---

2. JSX 문법

• HTML과 유사하지만 JavaScript 확장 문법

  const element = <div className="greeting">Hello!</div>;

• 중괄호 {} 안에 JavaScript 표현식 사용

  const name = "Alice";
  const greeting = <p>{name}님, 환영합니다!</p>;

---

3. 상태 관리 (useState)

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);  // 초기값 0

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

---

4. 생명주기 & 부수 효과 (useEffect)

import { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    const timer = setInterval(() => console.log('타이머 작동'), 1000);
    return () => clearInterval(timer); // 클린업 함수
  }, []); // 빈 배열: 컴포넌트 마운트 시 1회 실행

  return <div>타이머 콘솔 확인</div>;
}

---

5. Props 전달

// 부모 컴포넌트
<UserProfile name="Alice" age={25} />

// 자식 컴포넌트
function UserProfile({ name, age }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>나이: {age}</p>
    </div>
  );
}

---

6. 이벤트 핸들링

function Form() {
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("제출 완료");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" />
      <button type="submit">제출</button>
    </form>
  );
}

---

7. 조건부 렌더링

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <p>환영합니다!</p>
      ) : (
        <button>로그인</button>
      )}
      {isLoggedIn && <Dashboard />}  // && 연산자 활용
    </div>
  );
}

---

8. 리스트 렌더링

function TodoList() {
  const todos = ['커피 마시기', '코드 작성', '운동'];

  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo}</li>  // 고유 key 필수!
      ))}
    </ul>
  );
}

---

9. Context API (전역 상태)

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

// 2. Provider로 감싸기
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

// 3. Consumer에서 사용
function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div>현재 테마: {theme}</div>;
}

---

10. React Router (라우팅)

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

---

11. 커스텀 훅 (재사용 로직)

// 커스텀 훅 생성 (use 접두사 필수!)
function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

// 사용 예시
function ResponsiveComponent() {
  const width = useWindowWidth();
  return <p>화면 너비: {width}px</p>;
}

---

12. Styled Components (CSS-in-JS)

import styled from 'styled-components';

const StyledButton = styled.button`
  background: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
`;

function App() {
  return (
    <StyledButton primary>버튼</StyledButton>
  );
}

---

실전 예제: 간단한 할 일 목록

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const addTodo = () => {
    if (input.trim()) {
      setTodos([...todos, input]);
      setInput('');
    }
  };

  return (
    <div>
      <input 
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={addTodo}>추가</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

---

주의사항 & 팁

1. Key Warning: 리스트 렌더링 시 key는 고유 값으로 (인덱스 대신 ID 권장)
2. 훅 규칙: 훅은 컴포넌트 최상위에서만 호출
3. 불변성 유지: 상태 업데이트 시 새 객체/배열 생성 (예: setItems([...items, newItem]))
4. 컴포넌트 분리: 재사용성과 가독성을 위해 작은 컴포넌트로 분할
5. 개발자 도구: React DevTools로 컴포넌트 구조 디버깅

React는 선언적 UI와 가상 DOM으로 개발이 가능