📘 Next.js 기초 강좌

1. Client Component란?

Next.js에서는 기본적으로 Server Component가 사용됩니다.

하지만 useState, useEffect 같은 React 훅은 브라우저에서만 동작하기 때문에, 이런 경우에는 Client Component로 선언해야 합니다.

👉 방법: 파일 상단에 "use client" 추가

2. 상태 관리 기초 (useState)

(1) 카운터 예제

app/counter/page.tsx

"use client";

import { useState } from "react";

export default function CounterPage() {
  const [count, setCount] = useState(0);

  return (
    <main>
      <h1>카운터 예제</h1>
      <p>현재 값: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(count - 1)}>-1</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </main>
  );
}

👉 http://localhost:3000/counter 접속 후 버튼 클릭 → 상태 값이 변하는 걸 확인할 수 있습니다.

3. Form 처리

(1) 간단한 입력폼 만들기

app/form/page.tsx

"use client";

import { useState } from "react";

export default function FormPage() {
  const [name, setName] = useState("");
  const [submitted, setSubmitted] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitted(name);
  };

  return (
    <main>
      <h1>폼 입력 예제</h1>
      <form onSubmit={handleSubmit}>
        <input type="text"
          placeholder="이름을 입력하세요"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <button type="submit">제출</button>
      </form>

      {submitted && <p>안녕하세요, {submitted}님!</p>}
    </main>
  );
}

👉 http://localhost:3000/form → 이름 입력 후 제출 → 인사말 표시

4. Todo 앱 만들기 (실습 종합)

지금까지 배운 상태 관리 + 폼 처리를 합쳐서 간단한 Todo 앱을 만들어봅니다.

(1) app/todo/page.tsx

"use client";

import { useState } from "react";

export default function TodoPage() {
  const [todos, setTodos] = useState<string[]>([]);
  const [input, setInput] = useState("");

  const addTodo = (e: React.FormEvent) => {
    e.preventDefault();
    if (!input.trim()) return;
    setTodos([...todos, input]);
    setInput("");
  };

  const removeTodo = (index: number) => {
    setTodos(todos.filter((_, i) => i !== index));
  };

  return (
    <main>
      <h1>Todo 앱</h1>
      <form onSubmit={addTodo}>
        <inputtype="text"
          placeholder="할 일을 입력하세요"
          value={input}
          onChange={(e) => setInput(e.target.value)}
        />
        <button type="submit">추가</button>
      </form>

      <ul>
        {todos.map((todo, i) => (
          <li key={i}>
            {todo} <button onClick={() => removeTodo(i)}>삭제</button>
          </li>
        ))}
      </ul>
    </main>
  );
}

👉 http://localhost:3000/todo 접속 → 할 일을 입력/추가/삭제 가능

🎨 5. 스타일링

0) 전역 유틸 추가 (styles/globals.scss)

버튼/인풋의 기본 리셋과 포커스 스타일을 통일합니다.

/* 버튼/인풋 기본 리셋 + 포커스 */
button, input {
  font: inherit;
  border: 1px solid #ddd;
  background: #fff;
  outline: none;
}

button {
  cursor: pointer;
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  border: 1px solid #dcdcdc;
  transition: box-shadow .2s, transform .02s;
}
button:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
button:active { transform: translateY(1px); }

input {
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  width: 100%;
  border: 1px solid #dcdcdc;
}

:focus-visible {
  outline: 2px solid #2f78ff;
  outline-offset: 2px;
}

1) 공통 카드 레이아웃 (styles/card.module.scss)

3개 페이지(카운터/폼/투두)에서 재사용 가능한 카드 UI입니다.

.card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 1.25rem;
  max-width: 720px;
  margin: 2rem auto;
  box-shadow: 0 6px 30px rgba(0,0,0,0.05);
}

.title {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

.desc {
  color: #666;
  margin: 0 0 1.25rem;
}

.row {
  display: flex;
  gap: .6rem;
  align-items: center;
}

.actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.list {
  margin-top: 1rem;
  display: grid;
  gap: .6rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 28px;
  padding: 0 .5rem;
  border-radius: 999px;
  background: #f5f7ff;
  color: #2f78ff;
  font-weight: 600;
  border: 1px solid #e6ecff;
}

2) 카운터 페이지 스타일 (styles/counter.module.scss)

.value {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: .5px;
}

.btnPrimary { border-color: #2f78ff; color: #fff; background: #2f78ff; }
.btnGhost   { background: #fff; }
.btnDanger  { background: #fff; color: #e75151; border-color: #f0cccc; }

app/counter/page.tsx (스타일 적용)

"use client";

import { useState } from "react";
import card from "../../styles/card.module.scss";
import styles from "../../styles/counter.module.scss";

export default function CounterPage() {
  const [count, setCount] = useState(0);

  return (
    <section className={card.card}>
      <h1 className={card.title}>카운터 예제</h1>
      <p className={card.desc}>버튼을 눌러 값을 증가/감소해보세요.</p>

      <div className={card.row} style={{ justifyContent: "space-between" }}>
        <span className={`${card.badge} ${styles.value}`}>{count}</span>
        <div className={card.actions}>
          <button className={styles.btnPrimary} onClick={() => setCount(c => c + 1)}>+1</button>
          <button className={styles.btnGhost} onClick={() => setCount(c => c - 1)}>-1</button>
          <button className={styles.btnDanger} onClick={() => setCount(0)}>Reset</button>
        </div>
      </div>
    </section>
  );
}

3) 폼 페이지 스타일 (styles/form.module.scss)

.form {
  display: grid;
  gap: .8rem;
}

.label {
  font-weight: 600;
}

.hint {
  color: #888;
  font-size: .9rem;
}

.submit {
  border-color: #2f78ff;
  color: #fff;
  background: #2f78ff;
  width: fit-content;
}

app/form/page.tsx (스타일 적용)

"use client";

import { useState } from "react";
import card from "../../styles/card.module.scss";
import styles from "../../styles/form.module.scss";

export default function FormPage() {
  const [name, setName] = useState("");
  const [submitted, setSubmitted] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitted(name.trim());
  };

  return (
    <section className={card.card}>
      <h1 className={card.title}>폼 입력 예제</h1>
      <p className={card.desc}>이름을 입력하고 제출해 보세요.</p>

      <form className={styles.form} onSubmit={handleSubmit}>
        <label className={styles.label} htmlFor="name">이름</label>
        <inputid="name"
          placeholder="이름을 입력하세요"
          value={name}
          onChange={(e) => setName(e.target.value)}
          aria-describedby="name-hint"
        />
        <span id="name-hint" className={styles.hint}>예: 홍길동</span>

        <button className={styles.submit} type="submit">제출</button>
      </form>

      {submitted && <p style={{ marginTop: "1rem" }}>안녕하세요, <strong>{submitted}</strong>님! 👋</p>}
    </section>
  );
}

4) 투두 페이지 스타일 (styles/todo.module.scss)

.form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .6rem;
}

.add {
  border-color: #2f78ff;
  color: #fff;
  background: #2f78ff;
}

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .75rem .9rem;
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;
}

.text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remove {
  background: #fff;
  color: #e75151;
  border-color: #f0cccc;
}

app/todo/page.tsx (스타일 적용)

"use client";

import { useState } from "react";
import card from "../../styles/card.module.scss";
import styles from "../../styles/todo.module.scss";

export default function TodoPage() {
  const [todos, setTodos] = useState<string[]>([]);
  const [input, setInput] = useState("");

  const addTodo = (e: React.FormEvent) => {
    e.preventDefault();
    const v = input.trim();
    if (!v) return;
    setTodos([...todos, v]);
    setInput("");
  };

  const removeTodo = (index: number) => {
    setTodos(todos.filter((_, i) => i !== index));
  };

  return (
    <section className={card.card}>
      <h1 className={card.title}>Todo 앱</h1>
      <p className={card.desc}>할 일을 추가/삭제해 보세요.</p>

      <form className={styles.form} onSubmit={addTodo}>
        <inputplaceholder="할 일을 입력하세요"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          aria-label="할 일 입력"
        />
        <button className={styles.add} type="submit">추가</button>
      </form>

      <div className={card.list}>
        {todos.map((todo, i) => (
          <div key={i} className={styles.item}>
            <span className={styles.text}>{todo}</span>
            <button className={styles.remove} onClick={() => removeTodo(i)}>삭제</button>
          </div>
        ))}
      </div>
    </section>
  );
}

5. 오늘의 정리

• Client Component: "use client" 선언 필요
• useState로 상태 관리 (카운터 예제)
• 폼 처리 → 입력값 받아서 출력
• Todo 앱으로 종합 실습

📚 저장소

GitHub - heroyooi/next-tutorial at ch1_5