[유데미 러닝크루] Next.js 스터디 2주차 – 리액트 서버 컴포넌트 vs 클라이언트 컴포넌트

export default function ServerComponent() {
  console.log("서버에서 실행됨"); // 서버 터미널에서 확인 가능
  return <h1>서버 컴포넌트</h1>;
}

"use client";
import { useState } from "react";

export default function ClientComponent() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>클릭: {count}</button>;
}

export default function Example() {
  console.log("서버에서 실행됨"); // 서버 터미널에서 확인 가능
  return <h1>이 컴포넌트는 서버에서 렌더링됩니다.</h1>;
}

"use client";
import { useState, useEffect } from "react";

export default function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setTime((t) => t + 1), 1000);
    return () => clearInterval(id);
  }, []);

  return <h1>타이머: {time}초</h1>;
}

"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import styles from "./nav-link.module.css";

export default function NavLink({ href, children }) {
  const pathname = usePathname();
  const isActive = pathname.startsWith(href);

  return (
    <Link href={href} className={isActive ? styles.active : ""}>
      {children}
    </Link>
  );
}

import NavLink from "./NavLink";

export default function MainHeader() {
  return (
    <nav>
      <NavLink href="/meals">Browse Meals</NavLink>
      <NavLink href="/community">Foodies Community</NavLink>
    </nav>
  );
}