React와 Next.js 란?

# 실생활 비유로 이해하기

Next.js를 레스토랑에 비유하면:

• React는 요리사: UI 컴포넌트를 만듦
• Next.js는 레스토랑 전체 시스템:
  • 주문 접수 (라우팅)
  • 주방 관리 (서버 사이드 렌더링)
  • 서빙 (페이지 전달)
  • 매장 관리 (최적화) 등을 모두 관리

 

1. React란? 🎯

1.1 React 소개

React는 Facebook(현 Meta)에서 만든 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 만들기 위한 도구입니다.

1.2 React의 특징

1) 컴포넌트 기반

웹사이트를 레고 블록처럼 작은 조각(컴포넌트)으로 나누어 개발합니다.

// 버튼 컴포넌트 예시
function Button({ text, onClick }) {
  return (
    <button className="custom-button" onClick={onClick}>
      {text}
    </button>
  );
}

// 사용 예시
function App() {
  return (
    <div>
      <Button text="로그인" onClick={() => alert('clicked!')} />
      <Button text="회원가입" onClick={() => alert('signup!')} />
    </div>
  );
}

2) Virtual DOM

실제 DOM을 직접 조작하지 않고, 가상의 DOM을 먼저 변경한 후 최종적으로 실제 DOM을 업데이트합니다.

// 상태 변경 예시
function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        증가
      </button>
    </div>
  );
}

3) 단방향 데이터 흐름

데이터는 항상 위에서 아래로 흐르며, 상태 변경은 명확한 방법으로만 가능합니다.

function Parent() {
  const [name, setName] = useState("");

  return (
    <div>
      <Child name={name} onNameChange={setName} />
    </div>
  );
}

function Child({ name, onNameChange }) {
  return (
    <input
      value={name}
      onChange={(e) => onNameChange(e.target.value)}
    />
  );
}

 

2. Next.js란? 🚀

2.1 Next.js 소개

Next.js는 React를 기반으로 한 풀스택 웹 프레임워크입니다. React의 기능을 확장하여 더 많은 기능을 제공합니다.

2.2 Next.js의 주요 특징

1) 서버 사이드 렌더링 (SSR)

페이지를 서버에서 미리 렌더링하여 보냅니다.

// SSR 예시
export async function getServerSideProps() {
  const res = await fetch('<https://api.example.com/data>');
  const data = await res.json();

  return {
    props: { data },// 페이지에 props로 전달됨
  };
}

function Page({ data }) {
  return (
  {data.map(item => (
{item.title}
))}
  );
}

2) 정적 사이트 생성 (SSG)

빌드 시점에 페이지를 미리 생성합니다.

// SSG 예시
export async function getStaticProps() {
  const posts = await getAllPosts();

  return {
    props: {
      posts,
    },
    revalidate: 60,// 60초마다 재생성
  };
}

3) 파일 기반 라우팅

폴더 구조로 자동으로 라우팅이 설정됩니다.

pages/
  index.js        // 홈페이지 (/)
  about.js        // 소개 페이지 (/about)
  posts/
    [id].js       // 동적 라우팅 (/posts/1, /posts/2, ...)

3. React와 Next.js 실제 활용 예시 💡

3.1 소셜 미디어 앱 예시

// 게시물 컴포넌트
function Post({ title, content, author }) {
  return (
    <div className="post">
      <h2>{title}</h2>
      <p>{content}</p>
      <small>작성자: {author}</small>
    </div>
  );
}

// 피드 페이지
function FeedPage({ posts }) {
  return (
    <div>
      <h1>내 피드</h1>
      {posts.map(post => (
        <Post
          key={post.id}
          title={post.title}
          content={post.content}
          author={post.author}
        />
      ))}
    </div>
  );
}

// Next.js에서 데이터 가져오기
export async function getServerSideProps() {
  const posts = await fetchPosts();

  return {
    props: {
      posts,
    },
  };
}

3.2 쇼핑몰 예시

// 상품 목록 페이지
function ProductList({ products }) {
  return (
    <div className="grid">
      {products.map(product => (
        <ProductCard
          key={product.id}
          name={product.name}
          price={product.price}
          image={product.image}
        />
      ))}
    </div>
  );
}

// 상품 상세 페이지
function ProductDetail({ product }) {
  const [quantity, setQuantity] = useState(1);

  return (
    <div>
      <img src={product.image} alt={product.name} />
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <select value={quantity} onChange={e => setQuantity(e.target.value)}>
        {[1,2,3,4,5].map(num => (
          <option key={num} value={num}>{num}</option>
        ))}
      </select>
      <button>장바구니에 담기</button>
    </div>
  );
}

4. React와 Next.js를 사용하면 좋은 경우 📌

4.1 React를 선택하는 경우

1. 단일 페이지 애플리케이션(SPA) 개발
   • SNS 웹 앱
   • 관리자 대시보드
   • 실시간 데이터 시각화
2. 동적인 UI가 많은 경우
   • 인터랙티브한 차트
   • 실시간 채팅
   • 게임

4.2 Next.js를 선택하는 경우

1. SEO가 중요한 경우
   • 쇼핑몰
   • 블로그
   • 기업 웹사이트
2. 빠른 초기 로딩이 필요한 경우
   • 뉴스 사이트
   • 콘텐츠 플랫폼
   • 대규모 웹 애플리케이션

5. 장단점 비교 ⚖️

5.1 React

장점

• 큰 커뮤니티와 생태계
• 유연한 사용 가능
• 쉬운 학습 곡선

단점

• SEO 처리가 어려움
• 초기 설정이 필요
• 상태 관리 도구 선택 필요

5.2 Next.js

장점

• 내장된 SSR/SSG
• 자동 코드 분할
• 최적화된 성능

단점

• 더 많은 서버 리소스 필요
• 약간의 제약사항 존재
• 더 복잡한 배포 과정

6. 시작하기 🌱

6.1 React 시작하기

# Create React App으로 시작
npx create-react-app my-app
cd my-app
npm start

6.2 Next.js 시작하기

# Create Next App으로 시작
npx create-next-app my-next-app
cd my-next-app
npm run dev

결론 ✨

React와 Next.js는 각각의 장점이 있는 강력한 도구입니다:

• React: 유연하고 직관적인 UI 개발
• Next.js: SEO와 성능이 중요한 프로젝트에 적합

프로젝트의 요구사항에 따라 적절한 도구를 선택하면 됩니다.