// ❌ 잘못된 예시
function App() {
  if (condition) {
    const [count, setCount] = useState(0); // if문 안에서 호출 → 오류!
  }
}

// ✅ 올바른 예시
function App() {
  const [count, setCount] = useState(0); // 최상위에서 호출
}

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

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

const [value, setValue] = useState(초기값);

function Counter() {
  const [num, setNum] = useState(0);

  const plus = () => setNum(num + 1);
  const minus = () => setNum(num - 1);

  return (
    <div>
      <h2>{num}</h2>
      <button onClick={plus}>+</button>
      <button onClick={minus}>-</button>
    </div>
  );
}

/* 전체 영역 설정 */
.container {
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

/* 입력창과 버튼 가로 배치 */
.input-box {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

/* 입력창 크기 확장 */
.input-field {
  flex: 1;
  padding: 10px;
}

/* 추가 버튼 디자인 */
.add-btn {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

/* 목록 스타일 초기화 */
.list-box {
  list-style: none;
  padding: 0;
}

/* 개별 항목 디자인 */
.list-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

추가

```jsx
import { useState } from "react";

function Todo() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState("");

  const addTodo = () => {
    if (inputValue.trim() === "") return;
    setTodos([...todos, inputValue]);
    setInputValue("");
  };

  return (
    <div className="container">
      <div className="input-box">
        <input
          className="input-field"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder="할 일을 입력하세요"
        />
        <button className="add-btn" onClick={addTodo}>추가</button>
      </div>
      <ul className="list-box">
        {todos.map((todo, index) => (
          <li key={index} className="list-item">{todo}</li>
        ))}
      </ul>
    </div>
  );
}
```

- 상태 관리 변수: todos는 할 일 목록 배열을, inputValue는 입력창의 문자열을 관리한다.
- 상태 갱신 함수: addTodo 함수 내부에서 전개 구문(...todos)을 사용하여 기존 배열을 복사한 후 새 항목을 추가한다.

삭제 기능이 포함된 리스트

```jsx
const deleteTodo = (index) => {
  setTodos(todos.filter((_, i) => i !== index));
};

return (
  <ul>
    {todos.map((todo, index) => (
      <li key={index}>
        {todo} <button onClick={() => deleteTodo(index)}>삭제</button>
      </li>
    ))}
  </ul>
);
```

useEffect(() => {
  console.log("컴포넌트가 화면에 나타남");
}, []);

useEffect(() => {
  console.log("렌더링됨");
});

const [count, setCount] = useState(0);

useEffect(() => {
  console.log("count가 바뀜:", count);
}, [count]);

useEffect(() => {
  console.log("마운트");

  return () => {
    console.log("언마운트 - 정리 실행");
  };
}, []);

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}


.card {
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  border-radius: 10px;
  padding: 2rem;
  margin: 2rem auto;
  width: 90%;
  max-width: 40rem;
  text-align: center;
}

.control {
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.control label {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.control input {
  font: inherit;
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.actions {
  text-align: center;
  margin-top: 1rem;
}

.btn {
  font: inherit;
  background: #7a0141;
  border: 1px solid #7a0141;
  color: white;
  padding: 0.75rem 2rem;
  border-radius: 30px;
  cursor: pointer;
}

.btn:disabled {
  background: #ccc;
  border-color: #ccc;
  color: #666;
  cursor: not-allowed;
}

.btn:hover:not(:disabled) {
  background: #a40256;
  border-color: #a40256;
}

import { useState, useEffect } from "react";
import "./App.css";

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  useEffect(() => {
    const storedLoginInfo = localStorage.getItem("isLoggedIn");
    if (storedLoginInfo === "1") {
      setIsLoggedIn(true);
    }
  }, []);

  const loginHandler = (e) => {
    e.preventDefault();
    localStorage.setItem("isLoggedIn", "1");
    setIsLoggedIn(true);
  };

  const logoutHandler = () => {
    localStorage.removeItem("isLoggedIn");
    setIsLoggedIn(false);
    setEmail("");
    setPassword("");
  };

  return (
    <div className="container">
      <header className="main-header">
        <h1>React Auth Demo</h1>
        {isLoggedIn && (
          <nav className="nav">
            <button className="btn" onClick={logoutHandler}>
              로그아웃
            </button>
          </nav>
        )}
      </header>
      <main>
        {!isLoggedIn ? (
          <div className="card login">
            <form onSubmit={loginHandler}>
              <div className="control">
                <label htmlFor="email">이메일</label>
                <input type="email" id="email" value={email} onChange={(e) => setEmail(e.target.value)} />
              </div>
              <div className="control">
                <label htmlFor="password">비밀번호</label>
                <input type="password" id="password" value={password} onChange={(e) => setPassword(e.target.value)} />
              </div>
              <div className="actions">
                <button type="submit" className="btn">
                  로그인
                </button>
              </div>
            </form>
          </div>
        ) : (
          <div className="card home">
            <h1>환영합니다!</h1>
            <p>로그인에 성공했습니다.</p>
          </div>
        )}
      </main>
    </div>
  );
};

export default App;

const [isLoggedIn, setIsLoggedIn] = useState(false);
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

useEffect(() => {
  const storedLoginInfo = localStorage.getItem("isLoggedIn");
  if (storedLoginInfo === "1") {
    setIsLoggedIn(true);
  }
}, []);

const loginHandler = (e) => {
  e.preventDefault();
  localStorage.setItem("isLoggedIn", "1");
  setIsLoggedIn(true);
};

const logoutHandler = () => {
  localStorage.removeItem("isLoggedIn");
  setIsLoggedIn(false);
  setEmail("");
  setPassword("");
};

{!isLoggedIn ? (
  <로그인 폼 />
) : (
  <환영 메시지 />
)}